Writing reusable code in React with {render.props}

Neha Sharma
Mar 23 · 4 min read

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.

Problem Statment

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:

  1. 3-col layout, where all three col-components should have an independent wrapper
  2. Every col-component should able to access the props from parent wrapper

Solution:

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


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)

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


If you liked it please share and clap for it. You can follow me on twitter — twitter.com/hellonehha

JavaScript in Plain English

Learn the web's most important programming language.

Neha Sharma

Written by

Tech Lead; Brain behind JSLovers, Tech Speaker; ❤ Calligraphy and Chai. https://twitter.com/hellonehha; My Dev Journey: https://www.instagram.com/devgirllife/

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade