React.children do not take Functions as Children under consideration

[michal-lipski]

My component can have multiple children components. They can be of different types: Strings, JSX Components and functions.

<ChildrenCounter>
  First
  {() => <div>Second</div>}
</ChildrenCounter>

I wanted to render them using React.children.map helper function that unwraps the children opaque data structure. The problem is that children defined as functions seem to be ignored by React.children.map, React.children.count and other helper functions. See the example:

https://jsfiddle.net/bpdsraah/2/

I can access them and render directly from props.children wrapper but it is not a convenient way as one can never know for sure what type it will be.

[gaearon]

I think this is intentional, React.Children is intended to work with the children actually renderable by React rather than arbitrary objects (or functions). Can you explain the use case in more detail?

[michal-lipski]

Fair enough, although it was not clear for me why my child component was not rendered. Maybe there should be some warning from React.Children that this child component was omitted?

In my use case I had function as child component to render table that needed size. And it works fine like it is:

<Widget {...props} >
      {(size) =>(<Table data={prepareData(size)} />)}
 </Widget>

and somewere in Widget render method:

{this.props.children(size)}

Now i wanted to add additional child component to widget:

<Widget {...props} >
      {(size) =>(<Table data={prepareData(size)} />)}
     <Footer {...props}/>
 </Widget>

I need to change render method in Widget to handle its children. And here I wanted to use map to do something like this:

// following doesn't work
{ React.Children.map(this.props.children,(child)=>(_.isFunction(child) ? child(size) : child)) }

That would be most convenient as Widget component can have diferent children depending on uscase.
I was then suprised that it didn't work :)

[gaearon]

Why not do this instead?

<Widget {...props} >
  {(size) => (
    <React.Fragment>
      <Table data={prepareData(size)} />)}
      <Footer {...props}/>
    </React.Fragment>
  )}
 </Widget>

Then you don't need to count the children.

[gaearon]

I think the above should be a better solution.
If you disagree and would like to change the API behavior I suggest you to file an RFC: https://github.com/reactjs/rfcs
It's not obvious to me how it should behave e.g. for objects if we start making those exceptions, and an RFC would let you expand on that.