ref – https://reactjs.org/docs/render-props.html
https://flaviocopes.com/react-render-props/
A common pattern used to share state between components is to use the children prop.
For example, a component’s (this.props.children) references the JSX that you pass into this particular component.
|
1 2 3 4 5 6 7 8 9 |
const Children1 = () => {} const Children2 = () => {} const App = () => ( <Parent> <Children1 /> <Children2 /> </Parent> ) |
In our case, component Parent’s this.props.children references an array which contains Children1 and Children2 components.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
class Parent extends React.Component { constructor(props) { super(props) this.state = { /*...*/ } } render() { return <div>{this.props.children}</div> } } |
However, there is a problem here: the state of the parent component cannot be accessed from the children.
so we share state like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
class Parent extends React.Component { constructor(props) { super(props) this.state = { name: 'Flavio' } } render() { return <div>{this.props.children(this.state.name)}</div> } } const Children1 = props => { return <p>{props.name}</p> } const App = () => <Parent>{name => <Children1 name={name} />}</Parent> |
In the Parent, we have a state object with property ‘name’. We pass this into this.props.children
Thus, whatever we pass into JSX Parent component will be able to receive Parent’s state via prop:
|
1 |
<Parent>{name => <Children1 name={name} />}</Parent> |
However, using the children property on the prop object is very specific. You may not want this.
Render Prop
You have the option to use any prop. We can use someProp1, someProp2 as props in component Parent. It takes in data which we then pass to components Children1 and Children2.
|
1 2 3 4 5 6 |
const App = () => ( <Parent someprop1={name => <Children1 name={name} />} someprop2={age => <Children2 age={age} />} /> ) |
So in component Parent, this.props.someprop1 references function
|
1 |
{name => <Children name={name} />} |
Then, this.state.name is passed into into this.props.someprop1 in the render function.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
class Parent extends React.Component { constructor(props) { super(props) this.state = { name: 'Flavio', age: 35 } } render() { return ( <div> <p>Test</p> {this.props.someprop1(this.state.name)} </div> ) } } |
This name then goes into the function above and gets passed into component Children1.
|
1 |
{name => <Children name={name} />} |
Thus, the name ‘Flavio’ is passed into component Children1.
This is called render prop, which refers to a technique for sharing code between React components using a prop whose value is a function.
In other words, a component (Parent) with a render prop (someprop1) references a function:
|
1 2 3 |
<Parent someprop1={name => <Children1 name={name} />} /> |
In our case the function is:
|
1 |
name => <Children1 name={name} /> |
that returns component Children and is called in Parent’s render function:
|
1 2 3 4 5 6 7 8 9 10 11 |
class Parent extends React.Component { ... render() { return ( <div> <p>Test</p> {this.props.someprop1(this.state.name)} </div> ) } } |
More concretely, a render prop is a function prop that a component uses to know what to render.