reactjs - Nesting react components dynamically , adding custom JSX on the fly inside the component? -

<div classname="header">    <card>       <div classname="logo">           <logo />       </div>       <div classname="timer">           <timer />       </div>    </card> </div> 

i want achieve . have created component card , want component should contain random jsx other components .

i have got way of nesting react children using react.children method , not able find , how handle additional jsx inside component .

you can use this.props.children.

to handle specific data-structure, can use react.children utilities.

for example, if in case want add wrapping div every child component in card, can write:

const card = react.createclass({     render: function() {         const wrappedchildren = react.children.map(             this.props.children,             function(onechild) {                 return (                     <div classname="wrappingdiv">                         {onechild}                     </div>                 );             },         );         return (             <div classname="cardcontainer">                 {wrappedchildren}             </div>         );     }, });  // then: <card>    <logo />    <timer /> </card>