So I was just Trying a way to map the child component send to me but my child component have further childs in them i.e. some of the <h1></h1> tags so is there a way to further map these <h1></h1> elements in the code.

Parent Component

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>
    )
}

what i want is to map those <h1></h1> tags but this code is only mapping the div.