In the last post, we saw how we can reuse components in React byusing children.props. In this post, we are going to learn one more pattern to reuse for creating reusable components in React — render.props.
What is render.props
render.props are a way to write reusable components. As per the React docs — “render.props is a way of sharing code between React components using a prop whose value is a function.” There is constant confusion and comparison of render.props with children.props. However, both have their own use cases but render.props is more powerful than children.props, we will see in a while.
Suppose, we want to create a 3-col layout and every col in the layout can be independently handled by passing the props and we can access them.
In short, we want two things to achieve:
- 3-col layout, where all three col-components should have an independent wrapper
- Every col-component should able to access the props from parent wrapper
Let’s try to solve this problem first by children.props and then we will move to the render.props.
Step 1: Create four components — Left.js, Right.js, Mid.js, and Content.js for the wrapper.
Step 2: Put the below code in Left.js, Mid.js , and Right.js will have the do not forget to change the component name at line no #3,#4, and #7
Step 3: let's assemble to the application in index.js
Step 4: By children.props we will render the components in Content.js
YAY!! We got all three components with children.props in the Content. Now, go ahead and try the following code in Content.js to access each component individually.
You will see this won’t work. This is where children.props scopes end and render.props start. So, now we will refactor the code to implement the render.props
Code Link: https://codesandbox.io/s/y848622v9
We will use the same code and only refactor the files where it is required.
Step 1: Refactor the Index.js as per the below screenshot.
Step 2: In Content.js, wrap every component by a section or div tag. (as per the below screenshot).
Woah!! So, now we are able to get each and every component independently and it's own wrapper. The first requirement is met and as well as we saw how we can use render.props where children.props is lacking.
The 2nd requirement was to pass the props to the Components. For this, we will go the Content.js and add the props to the render component (line no #6 and #7). (refer the below screenshot)
If you will notice in above screenshot we are passing the props in the round parenthesis which stand for a function. Yes, we are calling props.left(). The function is here to pass the props but wait our Content.js is holding simple Component then how it is going to handle it. For this now we will re-visit our Content.js one last time.
Above at line no 15, we are passing a function as props to access the props passed from the Content.js, line no #6 and return the Component.
As a result, now you can access the title in Left.js as props. With this, we are able to successfully meet the second requirement too.
Code Link: https://codesandbox.io/s/9y6zpj4jjy
Summary, render.props let us pass the components as props and also you can pass the components as functions, return the component and access the props from the wrapper component. This is important when you want to access each and every component passed in render.props independently which is not possible with children.props.
If you liked it please share and clap for it. You can follow me on twitter — twitter.com/hellonehha