[Solved]-React.js - this.props.children an object when spreading the result of a .map from the parent-Reactjs

{...items} is passed as childrens in DropdownMenu.js.

Its available as a this.props.children

this.props.children can be array or object depend on how you rendering the children elements.

in your case

<DropdownMenu
      label={'Some label'}
      onChange={() => {}}
    >
      {...items}
</DropdownMenu>

items is an array. As we know

array is also type of object in javascript

with key equal to element's index and value is element itself

{...items} : this will passed as a object with key as a element index and value equal to array element.

To fix your problem, you should passed it without using spread operator.

{items} : this will passed as an array.

<DropdownMenu
      label={'Some label'}
      onChange={() => {}}
    >
      {items}
</DropdownMenu>

Its not because of map that you get children as object, but because you use spread operator for the items in

<DropdownMenu
          label={'Some label'}
          onChange={() => {}}
        >
          {...items} {/*spread operator here */}
</DropdownMenu>

Now that after map items is an array using {...items } makes it an object since you wrap your result of spread operator with {}, If you write {items}, that will be fine

 <DropdownMenu
      label={'Some label'}
      onChange={() => {}}
    >
      {items}
 </DropdownMenu>