Why function as child is not considered as children?

[ri8ika]

After digging deeper with this question, I have found function as a child is not being considered as children.

Take this example:

class CountExpression extends React.Component {
  render() {
    const children = React.Children.toArray(this.props.children)
    console.log(children)
    return <p>{React.Children.count(children)}</p>
  }
}
<CountExpression>
   {'one'}
   {'two'}
   { () => <p>Still, this will be ignored as child. Why?</p>}
   <p>This will be included in array - that's fine</p>
</CountExpression>

So, I would like know why is it so? Is it a bug or an expected behavior?

[TryingToImprove]

() => <p>Still, this will be ignored as child. Why?</p> creates a new component just like;

const MyComponent = () => <p>Still, this will be ignored as child. Why?</p>

[ri8ika]

I think it's a bug rather! I have updated my answer there in SO where you can see this.props.children.length shows the result by counting even the function as child component whilst React.Children.count(this.props.children) doesn't count function as child.

[behzad888]

dup #11888