Render Props In React JS (part 1)

Sometime, as developer we need flexible or reusable component which will share the code(state, props and function) for development purpose. renderProps is popular concept for sharing code between component in react js. basic of render props in this articles.

Today i discuss about only basic usage of a renderProps , means how to use renderProps to make resuable component. If someone know about basic of renderProps feature, they can avoid this articles.

And I will write the another part of this article aboutrenderProp , where i will discuss about advance feature, how to access other component state and function and enhanced the component by renderProps. so you can find that with following links at end of next week.

What is renderProps?

The term “render prop” refers to a technique for sharing code between React components using a prop or children whose value is a function.

It means a Component with renderProps taskes a function that returns a React Element and calls it instead of implementing it’s own render logic.

I use react-create-app as a boilerplate for this articles.

Simple procedure for using renderProps to create react component.

1. First, I create src/ReactPropsElement.jsx file and add RenderPropsElement component to this file.

Figure 1.1 Component that using for renderProps

In figure 1.1, in line 5, I return render() function into RenderPropsElement component,which takes the render props as a function and call it instead of own render logic and return react component..

2. Second, Add another file to src folder named SampleRenderProps.jsx . that file contains SampleRenderProps component, where i can implement renderProps .

Figure 1.2, Applying the `renderProps` to this element.

In figure 1.2, In line 2,import RenderPropsElement component, which is then using for implement renderProps into SampleRenderProps Component.

line 8, i use render function as props of RenderPropsElement, that function will be called instead of calling RenderPropsElement's own render Logic.

from line 10 to 13, This create list view to RenderPropsElement. So we can use same RederPropsElement to different component to render different list.

3. Then Modified index.js file for showing implementation of renderProps

Figure 1.3 Add the Sample Render Props to show in to index page at browser

In figure 1.3, In line 3, I need to import SampleRenderProps component to index.js file, which is then add into App component in line 10. Run this app from commmand line using npm start , it show the output in browser below

Figure 1.4 output of renderProps in browser

So from this example, we can share the code between react component by using render props as function.

render is not special keyword for impelementing renderProps . we can use our own custome props to share the code between component using renderProps. You have question, How? I will show you how its work.

For clear understanding, I add another file to project’s src folder named RenderPropsCustomProps.jsx file, which containsRenderPropsCustomeProps component.

Figure 2.1 Custome Properties for `renderProps`

In figure 2.1, line 5, I add renderList() as function, it’s work as like as render function which is describe in figure 1.1.

Then add new file named SampleCustomeRenderProps.jsx and Add the RenderPropsCustomProps component into that file.

Figure 2.2 Implement the with `renderProps` custom function.

In figure 2.2, In line 2, I import RenderPropsCustomProps component. In line 8, add renderList function as props for RenderPropsCustomProps insteads of using render props. It’s similar as figure 1.2.

Than add SampleCustomRenderProps component to App component in index.js file.

Figure 2.3, Add the SampleCustomeRenderProps component

After that, you can see that, the output of renderProps in browser using renderList custom props.

Figure 2.4, Output of custome props `renderList` for `renderProps`

Now, I discuss about special props named children of renderProps and how its work.

1. I add new file in src folder named RenderPropByChildren.jsx for discuss about childern props functionality for renderProps.

Figure 3.1 Call the children props as function instead of render in `RenderPropsByChildren` component

2. Then I add another file `SampleRenderPropsWithChildren.jsx` in src folder, where i can implement renderProps using children props.

FIgure 3.2 Implenent the renderProps

In Figure 3.2, line 2, I import RenderPropsByChildren component. from line 8 to 15, Here is the magic, I pass the function as children of RenderPropsByChildren component , which is then return the list country from that component.

please note that, when you pass the function as children of the component, do not add the space, other things between component start and end tag. it will create execption (this.props.children()) is not function. so make sure there is no space or other component between start and end tag.

3. Then modified the index.js file to show the output of the renderProps for children props.

Figure 3.3 insert component and output of render props.

In Figure 3.3,

(1) Import SampleRenderPropsWithChildren component to App component

(2) Add that component to App compnent.

(3) Output of the renderProps using special props children.

You can download sample code and check the how render props work from following link:

tariqulislam/react-render-props-example