reactjs - How to pass multiple components to another component in react -

i've multiple react component; component_1, component_2, component_3

which want use inside component_4 have array_list :

array_list = [     {         data: [{}, {}],         rendermenu: component_1     }, {         data: [{}, {}],         rendermenu: component_2     }, {         ..etc     } ] 

my component_4 this:

import componet_1 'component_1' import componet_1 'component_2' import componet_1 'component_3'  //next populate item_array here const array_list = [     {     data:[{},{}],     rendermenu:component_1     },     {data:[{},{}],     rendermenu:component_2     },     {..etc}     ]  class component_5 extends component{   render(){      <component_4    {...array_list}/>  } } 

i'm trying use inside component_4:

class component_4 extends component{   constructor(props){     super(props)    }    render(){     const {array_list} = this.props     var contentdata = [];     array_list.foreach(function(item, index, array){       console.log(item);       item.data.foreach(function(item1, index, array){           console.log(item.rendercomponent);           contentdata.push(<item.rendercomponent {...item}/>);       })     });     return(         <div>         <div classname="ui 4 column centered grid">           {contentdata}         </div>       </div>     )   } }  export default component_4 

now, question is, can pass components props i'm passing them using array_list, know can done using this.props.child. here need different, need different component different array_list.

another question: can render array of components, i've done using contentdata.

thanks response.

one clean solution not pass component directly @ all, only identifier can used in component_4 map individual entries different components.

for example:

import react 'react' import component_1 './component_1' import component_2 './component_2' import component_3 './component_3'  export default const component_4 = (props) => {     const items = props.items.map((item) => {         switch (item.type) {             case '1': return <component_1 {...item} />             case '2': return <component_2 {...item} />             case '3': return <component_3 {...item} />             default:  return null         }     }      return (         <div>             <div classname="ui 4 column centered grid">                 {items}             </div>         </div>     ) } 

---

import react 'react' import component_4 './component_4'  const items = [     {         data: [{}, {}],         type: '1'     }, {         data: [{}, {}],         type: '2'     }, {         ..etc     } ]  export default const component_5 = () => (     <component_4 items={items} /> )