Using Render Props to Share Code Between React Components.

John Au-Yeung
Mar 27, 2020 · 3 min read
Photo by Mia Baker on Unsplash

React is a library for creating front end views. It has a big ecosystem of libraries that work with it. Also, we can use it to enhance existing apps.

In this article, we’ll look at how to use render props to render components passed from the parent to the child.

Render Props

This means that the child element can use the prop to render elements instead of using its own rendering logic.

For example, we can write the following to pass a simple render prop:

function Foo() {
return <p>foo</p>;
}
function Bar({ render }) {
return render();
}
class App extends React.Component {
render() {
return <Bar render={() => <Foo />} />;
}
}

In the code above:

render={() => <Foo />}

is the render prop.

We pass () => <Foo /> to Bar so that in Bar , we just call render as we have above.

Since the function returns the Foo component, we’ll get foo displayed on the screen.

Use Render Props for Cross-Cutting Concerns

For example, we can write something like the following:

function Foo({ style }) {
return <p style={style}>foo</p>;
}
function Bar({ render }) {
return render();
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = { x: 0, y: 0 };
}
handleMouseMove(event) {
this.setState({
x: event.clientX,
y: event.clientY
});
}
render() {
const style = {
position: "fixed",
top: this.state.x,
left: this.state.y
};
return (
<div onMouseMove={this.handleMouseMove.bind(this)}>
<Bar render={() => <Foo style={style} />} />
</div>
);
}
}

In the code above, we have the the handleMouseMove event handler that updates the style object in render as we move the mouse with the latest mouse position as the state is updating.

We pass that in to Foo and then set the style of the p element in Foo to change the position of the text as we move the mouse.

Now we don’t need much code in Foo ‘s render method to know what to render.

Photo by Priscilla Du Preez on Unsplash

Conclusion

This way, the child component can just call that function and render whatever the parent passed in.

This reduces code repetition by letting the parent control what’s render by the child component.

This is especially useful if we want to share data from the parent to the child directly that’s relevant to how child components are rendered.

DataSeries

Imagine the future of data

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store