React render specific children

Question

I have looked through other peoples questions relating to this but cant find a suitable answer. I would like to pass children to a component and then pull out the specific children where I want them, most examples I have seen just have the children render in the same place.

My component looks something like this -

<ParentComponent>

<ChildOne/>
<ChildTwo/>

<ParentComponent/>

When I log the props.children inside the parent component I get an array which contains both children as objects. is there a simple way to pull out the specific child where I need it such as {props.children.ChildOne} at the moment I am using props.children[0] which isn't ideal as we will be passing the children dynamically in the future and the array length may change.

As always any help is greatly appreciated!

Answer 1

You should define the displayName property for the child components and then use the displayName in the parent to find the specific children from children list and place them where you want it to be.

// define displayName for each component, it can be any string
// You can set the displayName for any react component before exporting as shown 
// below

const ChildOne = (props) => { return (<div> Child One </div>)}
ChildOne.displayName = "ChildOne";
export default ChildOne;

const ChildTwo = (props) => { return (<div> Child Two </div>)}
ChildTwo.displayName = "ChildTwo";
export default ChildTwo;

Now in parent component you can filter out the specific child by using their displayName.

const ParentComponent = (props) => {

const getChildByDisplayName = (displayName) => {
  const child = React.Children.map(props.children, (child => {
     // you can access displayName property by child.type.displayName
     if (child.type.displayName === displayName) return child;
     return null;
  }))
  return child;
}    

return (
 <div>
   {/* You can change the order here as per your wish*/}
   {getChildByDisplayName("ChildOne")}
   {getChildByDisplayName("ChildTwo")}
 </div>
)
}

That's it, Now even if you put ChildTwo before ChildOne like below example, parent component will still render the ChildOne first and then ChildTwo because we have defined order in parent.

<ParentComponent>

 <ChildTwo/>
 <ChildOne/>

<ParentComponent/>