Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Explore common Render Prop patterns used in React

    Thomas GrecoThomas Greco

    Render props have become tremendously popular amongst the ReactJS community. Those new to the idea of a "render prop" can easily become confused as they can be implemented in various ways.

    In this lesson, we will walk through two extremely common ways in which render props are created. The first scenario will expose data to child components using this.props.render. Following this, we'll then modify the component to use the FaaC (Function-as-a-Child) pattern in which we'll expose data to child components via this.props.children.

    "Use a Render Prop!!" by Michael Jackson

    reactReact
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 00:03 On this page, we see that "Hey there, chat. Mind feeding me a render prop?" We don't want to be rude, that's what we're going to do.

    00:11 If we take a look at the trackcords.js file, you'll notice that I'm exporting a render prop and this is just a basic take on the render prop created in Michael Jackson's very well known article use a render prop. Although not, as well, known as the "Thriller" album, but that's a point for a different time.

    00:32 Anyway, we just a handle mouse move, as well as an on mouse click. Just as the name suggests, when a mouse move event occurs, it fires its handle mouse move. Then we also have that on mouse click on line 27, which is just going to update the X and Y values inside our last click object within our state.

    00:54 The most important part about this is the this.props.render, which is being used to give any child components access to state. When working with react, you often see this method being used to create render callbacks or render props.

    01:10 Let's see how we would implement this. If you look at the top of the page, we see that we're importing the coordinates component. If we try to use it, we'll quickly see this.props.render is not a function. As we know, we're exposing the state to any child components via that render prop that we just took a look at inside the coordinates component.

    01:36 Since we're passing state in this manner, we must add a prop named render directly under our component. Through that, we'll get access to state. Inside this render callback, I'm just going to establish a fragment and up top, I'm just going to have a div with two second level headers displaying the X and Y value. The last thing I'm going to do here is to add a paragraph element at the bottom and display the X and Y of that last click object within our state. I should probably change client to last click. All right, ready to go.

    02:15 Now that we're set up, if we do a clean refresh real quick, we see that that mouse move is still updating as we should expect. Also if we click on it, boom, we see that we'll get the exact same value for the top X and Y at the bottom.

    02:31 What's the big deal, Tom? It's a render prop, duh. Sometimes, you might see a render prop being exposed like this. They're called render props, but there's no render method there. What gives?

    02:48 We're no longer using a render prop. Instead, we're using the children prop. This implementation is called function as a child. As its name suggests, it provides child components with the ability to hook into a function as we see on line 18. From this function, we can grab data just like we did with that render prop before, except this time we'll be using the children prop.

    03:12 If we change this.props.render to this.props.children, we'll be able to make some magic happen. Maybe I'm fibbing and maybe it's just a fundamental part of react. However, when you come across this type of render prop pattern, especially if you're new to the subject, it could get quite confusing.

    03:33 After all, there's no render here. This mustn't be a render prop. But as we know, we're exposing the exact same functionality. However, this time, we're just using children, hence the name function as a child.

    Discuss

    Discuss