Get children of React.Fragment

Question

I'm returning React.Fragment in my component:

render() {
  return (
    <Fragment>
      <MyFirstElement/>
      <MySecondElement/>
    </Fragment>

Now I want to process all children in the parent component. I can get the Fragment component itself via this.props.children .

My Question

But how can I get the children of the Fragment component so that I can also process the children of Fragment ?

Answer 1

If you want to 'edit' the children passed to a component, the best option is to create a custom component in which you have full control over the children.

Since the component only returns its children, it behaves like a Fragment

Small example to demonstrate this"

1. <Parent /> returns a <CustomFragment> with 2 <Child /> components
2. The <Child /> component expects a testProp value, but <Parent /> does not provide it
3. In our <CustomFragment> we map() through our children, to add the testProp expected by <Child />

 class Parent extends React.Component { render() { return ( <CustomFragment> <Child /> <Child /> </CustomFragment> ); } } class Child extends React.Component { render() { return <p>{`Deep #${this.props.testProp}`}</p> } } class CustomFragment extends React.Component { render() { // Render children return this.props.children.map((child) => { // Change child if needed // For example, lets add a testProp child.props['testProp'] = Math.floor(Math.random() * 10) + 1 // Return return child; }); } } ReactDOM.render(<Parent />, document.body);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>