Check out a free preview of the full Complete Introduction to React (feat. Redux and React Router) course:
The "Adding a Color Prop" 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:

Brian adds a color property to the MyTitle component. He then passes the color to the <h1> element’s style attribute so the color of each heading can be customized.

Get Unlimited Access Now

Transcript from the "Adding a Color Prop" Lesson

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

[00:00:04]
>> Brian Holt: So let's do one more thing here. We want to be able to make the colors more interesting as well. So we can be able to pass that at. Excuse me, to be able to pass that as a color or as a property. So what we're gonna do here is when to say, style, colon.

[00:00:21] I always do that. Color: this.props.color.
>> Brian Holt: And then what we're gonna do down here is now we're gonna start passing color as well. So this one I'm gonna pass in Rebecca Purple. Here we're going to do this is my favorite CSS color medium aquamarine.
>> Brian Holt: But just so you know any valid CSS color here works.

[00:00:59] You can use HEX, you can use RGB, anything you can pass to color in CSS would work here. Another one of my favorite colors Peru. If you didn't know Peru is actually a color in addition to being a country or the other I'm not using here but you really should use is papayawhip.

[00:01:22] [LAUGH] So it's one of my favorite interview questions when I'm interviewing people at Netflix is what's your favorite CSS named color.
>> Brian Holt: Mine's definitely medium aquamarine because what the hell is medium aquamarine. [LAUGH] So now if we refresh, we get syntax errors [LAUGH], cool. Line ten, we have an extra parenthesis it looks like.

[00:01:46]
>> Speaker 2: You have a dangling comma, I think is the problem.
>> Brian Holt: That should be okay, right. Maybe it's not, well. You're right. So again, if you were wondering, that's what medium aquamarine looks like.
>> Audience: [LAUGH]
>> Brian Holt: [LAUGH] And that's how Peru the color looks like.
>> Audience: [LAUGH]
>> Brian Holt: But it's literally just putting color:peru, right?

[00:02:11] Not making that up there really is a CSS named color.
>> Brian Holt: But as you can see, you can pass anything into props and you can use it however you want to.