Pass two children as props to a React component

Question

I have a component like this

    const Component = () => {
     return (
    <div>
       <div className="data1">
         {children}
       </div>
       <div className="data1">
         {children2}
       </div>
    </div>
)
    }

I would like to have Item1 and Item2 inside the "data1" div, and some other components inside the "data2" div. Writing the next code I only have Item1 and Item2 as children but I don't know how to pass the second children (for example Item3 and Item4)

<Component>
  <Item1/>
  <Item2/>
</Component>

I have to reuse the Component multiple times into the app so a function called children2 that returns the elements is not a good idea because they are different depending on where I use the component.

it's not best practice! you can add another props or change the structure — Martin Rützy, Jun 22 '22 at 08:54

macborowy · Answer 1 · 2020-07-27T13:26:53.167

The recommended way is to create custom props for each child:

const App = () => <Component child1={<Item1 />} child2={<Item2 />} />

const Component = ({child1, child2}) => {
  return (
    <div>
      <div className="data1">
        {child1}
      </div>
      <div className="data1">
        {child2}
      </div>
    </div>
  )
}

const Item1 = () => <p>Item 1</p>
const Item2 = () => <p>Item 2</p>

ReactDOM.render(<App />, document.getElementById('root'));

<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>
<div id="root"></div>

score 2 · Answer 2 · edited Jul 27 '20 at 13:37

I've made an StackBlitz in order for you to check a simple solution to render multiple Children been pass to a component. But to resume my solution, if you do this:

<Component>
  <Item1/>
  <Item2/>
</Component>

You could in Component.js (or wherever the Component is defined) map (this.props.children.map({})) the prop children in order to get the details of every child past to the <Component />.

score 1 · Answer 3 · edited Jun 23 '22 at 05:41

You can pass multiple components as follows:

import React from 'react'

function Child (props)  {
    return (<>
        <div>{props.child1}</div>
        <div>{props.child2}</div>
          </>
    )
}

export default Child

import React from 'react'

function Parent {
    return (
        <>
        <Child
            children1={<Item1/>}
            children2={<Item2/>}
         />
         </>
     )
}

export default Parent

score 0 · Answer 4 · answered Jul 27 '20 at 13:42

    till me if it work
const Component = (item1,item2) => {
         return (
        <div>
           <div className="data1">
             {item1}
           </div>
           <div className="data1">
             {item2}
           </div>
        </div>
    )
        }
    how to used it
    which item one what you want to add  as item like this <item1/>
    <Component item1={item1} item2={item2}/>

Pass two children as props to a React component

4 Answers4