How to pass props to {this.props.children}

Question

I\'m trying to find the proper way to define some components which could be used in a generic way:

Answer 1

If you have multiple children you want to pass props to, you can do it this way, using the React.Children.map:

render() {
    let updatedChildren = React.Children.map(this.props.children,
        (child) => {
            return React.cloneElement(child, { newProp: newProp });
        });

    return (
        

            { updatedChildren }
        
    );
}

If your component is having just one child, there's no need for mapping, you can just cloneElement straight away:

render() {
    return (
        

            {
                React.cloneElement(this.props.children, {
                    newProp: newProp
                })
            }
        
    );
}