Ability to use return value of React.Children.map with React.Children.only

[Saruto]

As stated in the docs and shown in #4410, the return value of React.Children.map is incompatible with the React.Children.only function, and will return with the error message:

Invariant Violation: Invariant Violation: React.Children.only expected to receive a single React element child.

if used.

This incompatibility causes some fairly annoying restrictions, however. From what I understand, this means that you can't edit the properties of a component's children at runtime if they contain any component that requires a single child. (eg. you can't dynamically set the disabled prop of a child TouchableNativeFeedback component in the parent).

I believe this is due to the type differences between the this.props.children parameter and the React.Children.map return value, the former being a valid element and the latter not (see #4424 and reactjs/react.dev#87).

I'd like to make a request to have the return type of React.Children.map be the same as the type of this.props.children, which will fix these quirks and be much more intuitive. A separate static function that converts the return type of React.Children.map to the same type as this.props.children would also solve the issue. It feels like some sort of fix is in order, since it's a broad and strange restriction on the components you can use.

[gaearon]

I agree the current situation is confusing. Thanks for digging up those links. See also my attempt to analyze the behavior in #12136 (comment).

Let's keep this open for now I guess. It keeps coming up. If you have suggestions for how it should work, please file an RFC: https://github.com/reactjs/rfcs. We can then discuss it and see if the way forward makes sense. Thanks!

[softberry]

According to Docs v16.4.2 React.Children.only, React.Children.only is a kind of test function but not a filtering function and expects a single ReactElement otherwise throws error. I assume that the name Children.only is confusing und sounds like it is a filtering function that returns only valid ReactElement (child) from Children.
So I would rename it something like [React.Children.isOnly],[React.Children.isChild] , [React.Children.isValid] or [React.Children.isSingle] . But in this case expected result sounds like return value should be Boolean.

As this is a function which throws error in case of unexpected arguments, it should be better to use with the conjunction of componentDidCatch as described in Error Handling in React 16.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!