Children.only can not be called on result of Children.map

Children.only is intended to be called on an opaque Children object (eg. this.props.children). Best as I can tell, Children.map is intended to return an opaque Children object. But Children.only can’t be called on the return value of Children.map, as per https://github.com/facebook/react/issues/4410#issuecomment-122199087

It seems very reasonable to want to map your only child to another element (clone element, for instance), and then grab the only child from the map and use it to render. It is also very surprising for the identity operation to be passed into map, but the thing that comes out to not be semantically equivalent.

Issue demonstrated here: https://jsfiddle.net/9Ldyq5jk/4/

[Thinkscape]

This function is a mess…

The docs say:

Returns the only child in children. Throws otherwise.

Which suggests that I can pass it the children object (like I do for every other React.Children.* method) and it will give me the first and only child.

The docblock for the function states:

/**
 * Returns the first child in a collection of children and verifies that there
 * is only one child in the collection.
 *

Which further confirms that’s the expected behaviour…

But in reality it does none of those things. Instead, it just verifies that the arguments is a ReactElement 😕

[adamhenson]

I’m seeing an outcome of this issue in react-router-bootstrap, when using React.createElement directly.

https://github.com/react-bootstrap/react-router-bootstrap/issues/195

If React.createElement expects an array data type as the children argument, then I don’t see how it makes any sense why React.Children.only should be anything but what @epsitec suggested.

UPDATE: Based on the documentation, I was under the impression that the children argument received by React.createElement needs to be an array data type. Unfortunately, if there is a single child - in order to accommodate code that uses React.Children.only - this needs to be a React element object.

Yikes. So, I suppose I need to hack my code that uses React.createElement to accommodate this.

I’ll need to do something like the following:

if (Array.isArray(children) && children.length === 1) {
    children = children[0];
}

return React.createElement(type, props, children);