Explore common Render Prop patterns used in React

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.