React render specific children-CodePudding

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!

CodePudding user response：

Depending on your exact situation and needs, it might make more sense to pass child components as props than using the special children prop. Then you can render them whichever way you like.

<ParentComponent childOne={ChildOne} childTwo={ChildTwo} />
...
const ParentComponent = ({ childOne, childTwo }) => {
  return (
    <div>
      {childOne}
      <div>
        {childTwo}
      </div>
    </div>
  );
};

But knowing your exact scenario would help a lot with conceptualising the best way to implement this. Perhaps you can refactor your code to avoid passing an array of children like this.

CodePudding user response：

Actually, the ReactChildren API I was mentioning is useless here.

You can do something like this instead:

import React from 'react';
import { ChildOne } from './YourFile';

export function ParentComponent({children}) {
  return children.find(child => child.type === ChildOne)
}

CodePudding user response：

One way is to control the Child Components being passed to ParentComponent through state/props/redux store management in the component containing ParentComponent and its children.

But to have the solution as per your use case, we can avoid using children prop and use our defined prop on ParentComponent.

<ParentComponent
    components={[
     {key: 1, component: <div>Hello</div>}
    ]}
/>

So, we can now filter from the key.

Checkout this demo