Check out a free preview of the full Complete Introduction to React (feat. Redux and React Router) course:
The "Props" Lesson is part of the full, Complete Introduction to React (feat. Redux and React Router) course featured in this preview video. Here's what you'd learn in this lesson:

The props object allows for custom properties to be passed into a React component. Brian demonstrates how to pass a title property into the MyTitle component. After that, he spends a few minutes talking about the life cycle of the render function as well as the return statement syntax.

Get Unlimited Access Now

Transcript from the "Props" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Brian: This is kind of cute that we can check out this other thing a bunch of times on the page, but let's be totally honest, it's totally and completely worthless, right? You would never actually want to say this, check this other thing out, a bunch of times, not super useful.

[00:00:18] So we're going to mess with something called Props.
>> Brian: And props basically allow us to make these components a little bit more flexible. In this particular case, we don't want to be saying check out this other thing a bunch of different terms, but we do want to be able to pass information into it that it can display for us.

[00:00:36] So we're gonna make it a little bit more flexible.
>> Brian: So what we're gonna do here, I'm gonna deviate just a tiny bit from my notes.
>> Brian: So where it says null in all three different places here for my title.
>> Brian: I'm gonna pass in a string that I want to display.

[00:01:00] So I'm gonna say title, and whatever you want to say, I say props are great. Okay, and then here I'm going to say, the title,
>> Brian: Used props everywhere.
>> Brian: And then down here title.
>> Brian: Props are the best, get really excited about props. Okay, so now I'm passing this information down into my composite component.

[00:01:39] And what's really cool about it is, now MyTitle here has access to this information that we're passing down to it. So instead of,
>> Brian: This just, string that we're putting here, what we're going to do instead is we're going to say this.props.title.
>> Brian: Okay?
>> Brian: And save that.

[00:02:12]
>> Brian: Let's go over and refresh the page here. And notice now it's actually displaying three different strings using the same component.
>> Brian: So now we've made this MyTitle way more flexible, right. Now we've actually made a component that we're actually would be pretty useful that we can pass things into it's going to display different titles for us.

[00:02:37] And as you can imagine we can have a ton of markup in here that we do a bunch of different things, but we can make it flexible by passing in different properties. And you can pass anything in this property to a component, you can pass in functions, you can pass an object.

[00:02:50] You can pass in bouillons, numbers, whatever works in JavaScript is going to be is going to work as if passing into it as a property.
>> Brian: So how do you feel about that now? That makes it 10 times more useful now, instead of just some rote presentation of check out this other thing.

[00:03:07] Now we can pass whatever we want down, and we can be using MyTitle everywhere, which I think is pretty awesome.
>> Brian: Questions about properties?
>> Speaker 2: There was one question, is it possible control scope when calling the method rendered in the class?
>> Brian: Is it possible to control scope?

[00:03:37]
>> Speaker 2: Need more clarification?
>> Brian: I do, I would need more clarification of that. So basically the question of what scope do you have, which is a question I do understand. It's going to be the component itself. And you don't actually want to change that, because reacting need to be able to talk to the components that it's working with, bit specifically in the render function.

[00:03:56] It's actually best talking about the render function in general. So all components in react have to have a render method. And the absolute hard requirement of the render method is that it has to return a component, it must return a component.
>> Brian: So let's just say I comment this out, react should yell at me now.

[00:04:27] This is like what the hell you didn't return the component to me. So if you go to go down here and refresh it's gonna say, render a valid react component must be returned, right. So if you see that there's a decent chance that you just did like this where you just created a component and forgot to return it.

[00:04:48] It's a decent, I've done that a bunch of times, so that's what that looks like. But the other thing about render is it must be pure, and when I say pure, the ideas is if I have Bar X = 1, and then up here I say, X++. This is no longer a pure function because every time that I'm calling render, I'm changing x, and let's say I refer to x down here.

[00:05:14] I wonder if this is even gonna work. I have no idea.
>> Brian: It does, look. So it does work but the idea here is you don't know how many times render is going to get called render is going to called a bunch of times, right. For example, we only put the component on the page three times yet we got to four.

[00:05:39] I don't I'm not actually sure how that happened. But the idea is that you have no idea how many times render is going to be called, and so you need to basically not allow how many times they get called to affect the way it's going to look. So in this particular case that we're keeping track of the outside state, you can't do that render needs to work in a vacuum.

[00:06:02]
>> Speaker 3: Question?
>> Brian: Yeah
>> Speaker 3: We do know of I mean there must be a way to know how many render gets called, I mean there is you know, when component gets mounted, does mount or something, render gets called then, or I think at an initial stage. I think render gets called, yeah.

[00:06:19]
>> Brian: It does, but something that you may not be aware is that react does a lot of batching of its updates. And so you might be calling set state or force update, but you might actually not be updating it until a bunch of stuff gets batched together and it all gets flushed all at once.

[00:06:38] So react is doing some scheduling underneath the hood that you have no idea. And you really should not have to know about, that should be an implementation detail of react, and it should not be something you have to worry about. So you just totally sidestep the problem it in general if you just make sure that render is a pure function, given the same inputs is always going to work the same way.

[00:07:00] Any other questions?
>> Speaker 2: They're asking if you needed the div. And the answer is obviously you just need to, I shouldn't say obviously, but you need to return one element, right?
>> Brian: Yep.
>> Speaker 2: So even if you remove that div you need to put in the H1.
>> Brian: Yeah, so you can get rid of this div, that's totally fine, because as long as you have one H1 the returning here.

[00:07:22]
>> Speaker 2: Yeah. You can only return one element which is why all of people in the react components wrap it in a div cuz they have multiple things going on?
>> Brian: Yep, just to show what this can't look like. This doesn't work because at the top level you're gonna have two components returning.

[00:07:42] In fact, I think, yeah, if you refresh that, you're gonna get a syntax error, right? Because you're trying to say var x equals what?
>> Brian: Actually, that, yeah. Well, this actu-
>> Brian: Not what I was expecting.
>> Speaker 4: But it, yeah, it's returned the last
>> Brian: Yeah that's probably what it is.

[00:08:13] Yeah okay.
>> Speaker 4: It returned the last element
>> Brian: We're JavaScript edge cases, right? That's a JavaScript
>> Speaker 4: If you wrap them both div, then they'll both render, right?
>> Brian: Yeah exactly.
>> Speaker 5: So you're returning the element attributes as the first argument and the inner HTML as the second?

[00:08:33]
>> Brian: Precisely, the children right? So, this is always going to be the, whatever attributes you're passing, we talked about putting style here, you can say style, color red.
>> Speaker 5: And you could theoretically put HTML tags on line 21 in the title string, if you want to wrap that in a span or something?

[00:09:02]
>> Brian: Yeah I think that would probably work if you said like, well you have to be with something that will fits inside of an H1 right? So spans actually do, so yeah you could do React.DOM.span.
>> Brian: That should work.
>> Speaker 4: But you can just pass the span in the string?

[00:09:28]
>> Brian: Sorry say that one more time.
>> Speaker 4: If you had an actual span tag in the props are great string, like wrapping the word props or something, would that render as HTML?
>> Brian: In this particular case it probably should, because in this particular case we're just passing desktop props title just, essentially raw like we're not doing anything to it.

[00:09:53] You're goning to run into a slippery slope here because this is a string and this is not a string. So you have to be aware that, that can be either a reaction element or it could be a string. So you'll just have to be able to be aware of that and handle that separately.