From the course: React: Components, Context, and Accessibility

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Working with render props

Working with render props - React.js Tutorial

From the course: React: Components, Context, and Accessibility

Start my 1-month free trial

Working with render props

“

- [Narrator] A popular technique when rendering React components is to use a pattern called render props. Now we got a little sneak preview of this when we were looking at the context API. A render prop is a way to share code between React components using a function property. The property defines what is rendered and the component just injects it into the UI. Now if that sounds a little weird, that's totally OK. Let's take a look at it to understand a bit more detail. You'll notice that we're starting out with this display encouragement component being rendered let's go ahead and create it. So we'll first create that display encouragement component and we're just gonna stub this out for now. This is going to return some sort of something. Alright that's a little vague, right? But here's what it'll actually return. It's going to return this component called encouragement. This is going to be another one of these stateless components. This one should return a div and then we're gonna…

Contents