Complete Introduction to React (feat. Redux and React Router) Adding a Color Prop
This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Adding a Color Prop" Lesson
>> 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.
>> 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.