fernandopasik / react-children-utilities

Extended utils for ⚛️ React.Children data structure that adds recursive filter, map and more methods to iterate nested children.

Home Page:https://fernandopasik.com/react-children-utilities

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Issues with "deep children" (aka children within other component)

asgerhallas opened this issue · comments

Describe the bug
As described here #1 and here #3, there are some issues with searching deep.

I have tried the sample given in #3 (comment) and unfortunately it doesn't work (using React 16.8.6).

To Reproduce
I have the sample running here: https://codesandbox.io/s/busy-hypatia-gvdre

The problem seems to be that child.props.children is not set, when we reach a functional/class component - as it's children are not provided, but evaluated on render.

I don't know if this has been otherwise in earlier versions of React, or if there's a work around.

You described the problem quite well. As things are now the only workaround would be to implement the deep map in the nested component as well.

I've Analyzed further the problem and the examples you provided in your stackoverflow post.
The original behaviour is to attend the component nested children, but I think it would be a good feature to implement a pierce property that would render sub-components and apply to all the operations of this library.

Thinking more about this problem seems that what you proposed interferes with the implementation of each of children React Elements.

In React the parent does not render its children that responsibility is left to their own. It seems like the idea of using child.type() is a bit hacky.

Please feel free to provide another way to perform this. I'll reopen the issue if more info or a PR is put forward.

any solutions?