The returned value of `React.Children.map` is weird.

[benjycui]

I am not sure whether it is a bug. Let's look at the following code(or in JSFiddle):

var Test = React.createClass({
    render: function() {
        console.log(React.Children.map(this.props.children, function(child) {
            return child;
        }));
        // console.log(this.props.children);
        return this.props.children;
    }
});

React.render(
React.createElement(Test, {}, React.createElement('input', {})), document.body)

I think the returned value of React.Children.map should be the same as this.props.children. But what surprise me is that the returned value is something like this: {'.0': ReactElement}.

Do I misunderstand React.Children.map?

[jimfb]

The Children.map function differs from Array.map in that it is intended to take in a valid Children object and return a valid Children object. Children should be treated as an opaque datastructure, and your code should never rely on the underlying type/implementation of this.props.children. When working with children, always use one of the React.Children.* helpers.

If you are trying to get out an array of children, you can use the following code:

var myArray = [];
React.Children.forEach(this.props.children, function(child){myArray.push(child);});
console.log(myArray);

You should treat Children as a black box, never looking inside. I'm going to close out this issue, because the implementation of React.Children.map correctly returns a valid Children object. For more details: https://facebook.github.io/react/docs/top-level-api.html#react.children

[benjycui]

But, how to explain this.

An error is threw: Uncaught Error: Invariant Violation: ReactCompositeComponent.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

It is OK, if I just return this.props.children(See this). But if I return the result of React.Children.map, an error will be threw.

Actually, I met this problem in my project. I am not going to access this.props.children directly. And I just return the result of React.Children.map in render, then an error occurs.

I am confused, sorry to trouble you.

[yiminghe]

if this.props.children contains only one child, render() should not throw error, and React.Children.only should not throw error too.

[zpao]

It is OK, if I just return this.props.children(See this). But if I return the result of React.Children.map, an error will be threw.

Yes, this.props.children is a weird and special thing, which is why there are helpers to deal with it. Your case happens to work with returning because you have a single child. If you had multiple, then returning this.props.children would have thrown.

render must return a valid ReactElement. a single child is one such element. The return value of React.Children.map is not.

[benjycui]

And how about this? An error will be threw: Uncaught Error: Invariant Violation: onlyChild must be passed a children with exactly one child.

I am curious, there is only one child in this.props.children, but it seems that React.Children.only can not handle this case.

[zpao]

You're calling React.Children.only on the return value of React.Children.map, which is incompatible. The error is admittedly nonobvious and misleading. React.Children.only expects to receive this.props.children and does its best to handle the different types that may be (single element, array of elements, or (for now but deprecated) and object with keys - it specifically is failing on the last case due to the return type from map)

[benjycui]

OK, thank you.