javascript - Rendering multiple react component from an array -

i've react component, let's component_1. and, array of form, let's say, array_list =[{},{},{},{}].

i'm trying render component inside component, component_2, so:

import component_1 'component_1' import array_list 'array_list'  class component_2 extends component{   constructor(props){     super(props)   }    render(){     const {rendermenu} = this.props     var contentdata = [];     array_list.foreach(function(item, index, array){           contentdata.push(<component_1 {...item} />);     });     return(         <div>         <div classname="ui 4 column centered grid">            {contentdata}         </div>       </div>     )   } }  export default component_2 

while, works other html elements. here throws error:

react.createelement: type should not null, undefined, boolean, or number. should string (for dom elements) or reactclass (for composite components). check render method of `onboardingcontentelement` 

can render array of react component's way? if not, there circumvent approach this?

are sure import statement working? array.map, perfect turning array of object data array of components.