How to receive childs of childs?

Question

I want to skip one child encapsulation to get access to the grand-child directly.

this.props.children.map((x) => ...);

The example above is used to loop over the childs of a parent... But how do i iterate over the childs of childs ?

I tried to access the childs of childs, but this gave me a undefined exception.

this.props.children.map((x) => return x.children);

Answer 1

this.props.children is not an array. you should transform it before apply map transformation.

let children = React.Children.toArray(this.props.children)
children.map((x) => return x.props.children);

Also you have to access children props to access to its children.

Answer 2

This will work for you:

const level2Child = this.props.children.map(child => {
        return child.props.children;
});

Answer 3

instead of:

this.props.children.map((x) => return x.children);

use:

this.props.children.map((x) => return x.props.children);

Answer 4

It will be hard for you to get exact code of people which solve your problem. Rather I would suggest you to take approach of 'recursion'.