Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Passing a Component to other component through a property in an array of objects

I have an array like this:

const actions = [
    {
      header: "Money",
      type: "icon",
      icon: <Icon.DollarSign
        key={5}
          style={{
            display:  "block" ,
        }}
        size={20}
        color="#88CFE0"
        onClick={() => console.log('Dollar')}
        className="cursor-pointer"
      />
      ,
      visible: true,
    },
  ]

I’m trying to render that component inside another component in this way (I’m passing the "actions" object as a prop):

export const ActionsPersonalice = ({
  actions,
  action,
  data,
  validateDataPoa,
}) => {
    return (
        <>
          {actions.map((item, index) => {
            if (item.type == "button") {
              return (
                <button
                  key={index}
                  style={{
                    fontWeight: "400",
                    color: "#88CFE0",
                    textDecoration: "underline",
                    border: "none",
                    backgroundColor: "transparent",
                    display: item.visible ? "block" : "none",
                  }}
                  className="cursor-pointer"
                  type="button"
                >
                  {item.header}
                </button>
              );
            }
            if (item.type == "icon") {
               return item.icon
            }
          })}

But when I tried this, an error is raised:

Objects are not valid as a React child (found: [missing argument]). If
you meant to render a collection of children, use an array instead.

If I pass the icon inside an property directly (not inside the array), the component is rendered correctly.

Anyone knows how I can fix that behaviour when I use an array?

Thanks in advance.

Tags:

2

Answers


  1. 0

    If you meant to render a collection of children, use an array instead.typically indicates that a non-primitive type (e.g., an object or array) is being directly rendered as a React child. This often happens when the JSX syntax is misused or when non-renderable data types are being passed as children.

    In this case, the issue might be coming from how the icon property is being handled.

    Check the actions prop being passed to the ActionsPersonalice component is structured correctly and contains valid React elements.

    Check that the elements within the actions array are correctly formatted and passed.

    Login or Signup to reply.
  2. 0

    i tried this and is working fine. maybe is something about the Icon componente. what library are you using for the Icons? also try update the post with the whole error

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search