Children of a component is not an Array if there is only a single child

[farooqkz]

Current behavior

When I try to render a component:

<A>
  <B>
</A>

A.props.children is an object. However if I pass two children, it would be an array of objects.

Expected behavior

props.children must always be an array of objects.

Additional context

Not sure if this is a problem. But for me, I have to do a check most of the time and convert the object to a single element array and then use it. Perhaps there is another props which is always an array?

[Havunen]

This is expected behavior and not a bug, if you always would like to have have the children as an array, you could either declare the children as an array in the code. Or write some util method to avoid duplicate code to access the children, or write a custom plugin to change the JSX compilation behavior.

I would also try to investigate why your code needs to frequently access its children. It does not sound a clean design if it needs to be done frequently.

[farooqkz]

I need to iterate over children and make whichever the cursor on focused: https://github.com/farooqkz/chooj/blob/main/src/DropDownMenu.js#L40

I also need to determine the number of children to calculate the overall height of the menu.

[Havunen]

Yeah I think that is something what can be handled at the application layer

[farooqkz]

Yeah I think that is something what can be handled at the application layer

Do you recommend any other way of achieving this?

[Havunen]

I would personally just create a utility method "asArray" or something like that and pass the children there when you need them as array

[farooqkz]

Thanks seems good