Así que solo estaba intentando una forma de mapear el componente secundario que me enviaron, pero mi componente secundario tiene más elementos secundarios, es decir, algunas de las etiquetas <h1></h1> , ¿hay alguna forma de mapear aún más estos <h1></h1> elementos en el código.

Componente principal

 var ParentComp = function() { return ( <div> <h1>Hello World</h1> <SomeComponent name="Dev"> <div> <h1>DEV</h1> <h1>DEV</h1> <h1>DEV</h1> <h1>DEV</h1> <h1>DEV</h1> <h1>DEV</h1> </div> <div> <h1>DEV</h1> <h1>DEV</h1> <h1>DEV</h1> <h1>DEV</h1> <h1>DEV</h1> <h1>DEV</h1> </div> <div> <h1>DEV</h1> <h1>DEV</h1> <h1>DEV</h1> <h1>DEV</h1> <h1>DEV</h1> <h1>DEV</h1> </div> </SomeComponent> </div> ) }

ChildComponent

 var SomeComponent = function(props) { return ( <div> <h1>{props.name}</h1> <div> {React.Children.map(props.children, function(child) { return ( React.Children.map(function(children) { return ( <fieldset {...children.props}> <legend>{React.cloneElement(children)}</legend> </fieldset> ) }) ) })} </div> </div> ) }

lo que quiero es mapear esas etiquetas <h1></h1> pero este código solo está mapeando el div.