React Extend Children Props | React cloneElement

 import React from 'react';

function RootComponent () {

    return (

        <ParentComponent>

            <ChildComponent a="1" b="2" />

            <ChildComponent a="3" b="4" />

        </ParentComponent>

    );

}

function ChildComponent (props: ChildComponentProps) {

    return (

        <div>{JSON.stringify(props)}</div>

    );

}

function ParentComponent (props: ParentComponentProps) {

    /* 

    // Variant 1.

    return (

        <div>{

            React.Children.map(props.children, function (child: React.ReactElement<ChildComponentProps>): React.ReactElement<ChildComponentProps> {

                return React.cloneElement(

                    child, 

                    {

                        a: child.props.a + 1,

                        b: child.props.b + 2,

                        key: child.props.a + 1

                    },

                    null

                );

            })

        }</div>

    );

    */

    /*

    // Variant 2.

    return (

        <div>{

            React.Children.map(props.children, function (child: ChildComponent): ChildComponent {

                return (

                    <ChildComponent

                        {...child.props} 

                        {...{

                            a: child.props.a + 1,

                            b: child.props.b + 2,

                            key: child.props.a + 1

                        }} 

                     />

                );

            })

        }</div>

    );

    */

    // Variant 3.

    return (

        <div>{

            React.Children.map(props.children, function (child: React.ReactElement<ChildComponentProps>): React.ReactElement<ChildComponentProps> {

                return (

                    <child.type

                        {...child.props} 

                        {...{

                            a: child.props.a + 1,

                            b: child.props.b + 2,

                            key: child.props.a + 1

                        }} 

                     />

                );

            })

        }</div>

    );

}