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

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

There is a logic going on for rendering between parent and children components of course, you can imagine ` and as an example of this logic.

This is a dummy implementation for the purpose of the question:

var Parent = React.createClass({
  doSomething: function(value) {
  },
  render: function() {
    return ({this.props.children});
  }
});

var Child = React.createClass({
  onClick: function() {
    this.props.doSomething(this.props.value); // doSomething is undefined
  },
  render: function() {
    return ();
  }
});

The question is whenever you use {this.props.children}` to define a wrapper component, how do you pass down some property to all its children?

Cloning children with new props

You can use React.Children to iterate over the children, and then clone each element with new props (shallow merged) using React.cloneElement.

See the code comment why I don't recommend this approach.

Using cloneElement is uncommon and can lead to fragile code. See common alternatives.
source: react.dev



const Child = ({ childName, sayHello }) => (
sayHello(childName)}>{childName}
);

function Parent({ children }) {
// We pass this sayHello function into the child elements.
function sayHello(childName) {
console.log(Hello from ${childName} the child);
}

const childrenWithProps = React.Children.map(children, child => {
// Checking isValidElement is the safe way and avoids a
// typescript error too.
if (React.isValidElement(child)) {
return React.cloneElement(child, { sayHello });
}
return child;
});

return {childrenWithProps}
}

function App() {
// This approach is less type-safe and Typescript friendly since it
// looks like you're trying to render Child without sayHello.
// It's also confusing to readers of this code.
return (




);
}

ReactDOM.render(, document.getElementById("container"));






Calling children as a function

Alternatively, you can pass props to children via render props. In this approach, the children (which can be children or any other prop name) is a function which can accept any arguments you want to pass and returns the actual children:



const Child = ({ childName, sayHello }) => (
sayHello(childName)}>{childName}
);

function Parent({ children }) {
function sayHello(childName) {
console.log(Hello from ${childName} the child);
}

// children of Parent must be a function
// which returns the actual children. We can pass
// it args to then pass into them as props (in this
// case we pass sayHello).
return {children(sayHello)}
}

function App() {
// sayHello is the arg we passed in Parent, which
// we now pass through to Child.
return (

{(sayHello) => (
<>



)}

);
}

ReactDOM.render(, document.getElementById("container"));




Stack Overflow Q#32370994, score: 1515