Children forEach filters functions

[neytema]

React v15.5.4

Unexpected behaviour of React.Children.forEach – silently filters functions.

Current behavior:

const element = (
  <div>
    {() => {}}
    {() => {}}
  </div>
);
console.log(React.Children.toArray(element.props.children))
// Output: []

Expected behavior:

Children.forEach should throw Invariant error then function type child is met.

or

Children.forEach shouldn't filter function type children.

[ahlusar1989]

🤔 @neytema I am not able to reproduce this. What browser are you using?

[frankalbenesius]

Hey @neytema, I did some experimenting and it appears that all React.Chilrden utilities filter down to just component children.

It's not totally clear from the React.Children docs if that's the intended behavior, but I think it might be. But I'm no React expert so I'm not sure.

It looks like you could just use the "children" prop as an array normally if you'd like to iterate through the functions, though.

[neytema]

@ahlusar1989 nodejs v6.10.3

@frankalbenesius I am concerned about inconsistency..

If you'd pass an object type child React.Children.forEach will throw 'Objects are not valid as a React child' error. Functions are not valid React child also. As far as I know.

Object example:

const element = <div>{{}}</div>;
React.Children.toArray(element.props.children);
// throws 'Objects are not valid as a React child (found: object with keys {}).'

And you can't simply use children as array because it is not always an array or not a flat one.

[ahlusar1989]

@neytema I understand. Referencing the above example, you would need to pass a string type or React component(created by React.createElement) or array type of React elements; type checking is the only means for preventing the above error, if I am not mistaken. Though in theory, toArray is semantically correct because it adds keys..... 🤔

[danburzo]

Landed here because I couldn't get functions as children to work with React.Children methods. As per #11888, this is intentional and I guess this issue can be closed with the same resolution?