React.Children.isValidChildren similar to React.isValidElement

[dounan]

Do you want to request a feature or report a bug?
feature

What is the current behavior?
No isValidChildren method available

What is the expected behavior?
Returns true if passed in the 'opaque' children object

[aweary]

What types of invalid children are you looking to test for? Have you tried using React.Children.Only?

[syranide]

@aweary I think he wants to validate whether the value is a child or not. But there is no such thing. Anything is a valid child/children, but only certain values can be rendered (e.g. by ReactDOM).

@dounan What do you want this for?

[dounan]

I think he wants to validate whether the value is a child or not.

Yep. Sorry I should I have been more clear in the initial issue.

Anything is a valid child/children

Agreed. This issue is specifically for React's children blackbox data structure. From the React doc: 'React.Children provides utilities for dealing with the this.props.children opaque data structure.'

What do you want this for?

I'm writing a library that provides some validation logic on props / state, but would like to skip the validation if given the 'opaque` children data structure. Currently I do this by checking if the key of the prop is 'children', but it is possible that the developer reassigns the value of the 'children' prop to a different prop key or to a key on the state. Instead it would be nice to be able to simply check if the value itself is React's 'opaque' children data structure.

I think it might be possible to use to use some of the existing children helper functions to do this via some sort of try/catch, but that seems brittle and hacky.

[syranide]

Agreed. This issue is specifically for React's children blackbox data structure. From the React doc: 'React.Children provides utilities for dealing with the this.props.children opaque data structure.'

children is not actually an opaque structure today. It should be treated as such so that you don't try to parse it as-is but instead use the React.Children helpers. I'm speculating here, an opaque children structure may be introduced in the future, however I assume even then it's just that children MAY be an opaque structure but all values will still be valid children. The opaque children structure will simply be a valid value too which may have some performance/semantic differences, probably primarily used by JSX.

I'm not entirely sure what you're trying to build, but tl;dr there is no such thing as invalid children, any value is a valid child and probably always will be.

[dounan]

tl;dr there is no such thing as invalid children, any value is a valid child and probably always will be.

Is that true? I think objects are invalid children (React 15.5.4) (#3473)

children is not actually an opaque structure today. It should be treated as such so that you don't try to parse it as-is but instead use the React.Children helpers.

Right, currently 'children' could be any arbitrary data structure or primitive. However, as devs we're not supposed to care, and we need to treat it as a black box value. I think the suggested name of isValidChildren might be slightly throwing the thread off-topic. Let's just give this black box value a type: ReactChildren. What I was really looking for is a function that given some arbitrary value, returns true iff the value is of type ReactChildren. In the current world, this function is not really possible to implement because the value could be anything (string, number, React element, etc).

After thinking about my specific use case more, I'm not sure if having this function would cover all the cases, so I think I might need to think a bit more on this. However, having this function would cover a majority of the cases that I need to cover, and I do still think it would be nice to have this type of utility function (for example, React.Children.count({}) will throw an exception).

[syranide]

Is that true? I think objects are invalid children (React 15.5.4) (#3473)

Yeah, but partly because they used to be treated as Maps, which was a bad idea so they deprecated it. It's not unthinkable that objects will be tostringed in the future or something similar. It's also important to note that objects are still valid children and can be used with components that handle children manually. So depending on the target of children, any value can be a valid child. Just like there are native elements that only support string values (or no children!). So it cannot be determined in a generic fashion. So any value is valid, but not always.

[aweary]

So the question here isn't really how to verify valid children, but how to validate that a value can be returned from render with react-dom. For example, you can pass a function as a child to a component that uses it as a render callback, but you can't return a function from render.

I think it's reasonable to defer this validation to React since it can provide much better error messages in most cases, especially with the inclusion of the render stack in 16. I feel that providing an API for testing this would encourage library authors to implement their own error messaging, and I'm not sure that's a good thing in the general case.

I mentioned React.Children.Only because all it does is add an invariant with an isValidElement condition, which could be used to validate that a child can be rendered. Or if you need to, you could just use React.isValidElement with some typeof to handle this if you really need to.

[dounan]

So depending on the target of children, any value can be a valid child.

That makes sense.

Or if you need to, you could just use React.isValidElement with some typeof to handle this if you really need to.

This is probably the approach that I will take :)

Thanks @aweary and @syranide for the info and advice 👍