‫It's time to introduce
‫yet another fundamental React concept, which is props.
‫And props is essentially
‫how we pass data between components.
‫And in particular, from parent components
‫to child components.
‫So we can imagine props as being
‫like a communication channel
‫between a parent and a child component.
‫So in practice, what we're going to do,
‫is to now customize each of these pizza components
‫that we have right here.
‫So, remember how we created the pizza component
‫which has this image, the pizza name, and the ingredients.
‫But right now all of the pizzas are the same
‫because, well, we didn't have a way of passing
‫different data into them to make each of them customized.
‫But now, as we learn about props,
‫we will be able to do that.
‫So, first of all, let's
‫grab our pizza component
‫and cut it from here and place it right after the menu,
‫just so we can see what's happening.
‫And then let's get rid of this repetition here for now.
‫So we only want this one pizza component here for now.
‫Okay, and so now it's time to pass the data
‫from this parent component here,
‫which is the menu in this case, to the pizza component.
‫So what we want to pass is basically this string right here.
‫So, the link to the image,
‫then the name of the pizza, and the ingredients.
‫So to define props, we do it in two steps.
‫First, we pass the props into the component,
‫and then second, we receive the props
‫in the component that we pass them into.
‫So, here is where we pass those props in.
‫And we write them just like this.
‫So, just as if they were normal attributes.
‫So,
‫pizza spinaci.
‫That's the first one.
‫Then, let's also define a prop for the ingredient.
‫And by the way, prop simply stands for property.
‫It's just a short for,
‫yeah, property.
‫Okay?
‫And then finally, let's say the photo or photo name.
‫And then let's grab this one here.
‫All right.
‫And maybe let's also pass in a price.
‫And for now, I will also pass it as a string
‫but I will show you something in a minute.
‫So for now, just write it like this.
‫Give it a save;
‫and then Prettier will format everything nicely like this.
‫And now we need to go to the second step,
‫which is to actually receive the props here
‫inside the child component.
‫So right now, of course, the component has no way of knowing
‫that these four props have been passed in.
‫So, the way we do that, is to accept a props parameter
‫here in this component.
‫And then for starters, let's just lock this props
‫to the console; and take a look at what's happening.
‫And, we already can see something here.
‫So, this props is basically this object right here;
‫and it has name, then pizza spinach, which is exactly this.
‫So, what happened, as React included this pizza component,
‫it basically called dysfunction in past
‫in this props object.
‫And this props object is made out of these four props
‫that we passed into the component.
‫And so now we can use this props object
‫to replace all of these values here.
‫Now, we need to take these values out of the object;
‫and therefore, we need JavaScript, right?
‫So here, this is no longer a string;
‫but we need to enter JavaScript mode again.
‫So, props dot photo name is this one.
‫And here, it is the name of the pizza.
‫And again, we need JavaScript mode.
‫So, props dot name.
‫The same thing down here.
‫So, props dot name.
‫And finally, down here, we want props dot ingredients.
‫Or actually, it's ingredient.
‫Let's fix that here.
‫Ingredients and ingredients down here.
‫Okay.
‫And of course, now everything still looks the same;
‫because the data that we had here before,
‫is exactly the data that we have here.
‫But now let's actually make some magic happen.
‫So, let's create another pizza component;
‫and then, this is where we will see why props are so useful.
‫So let's create a pizza funghi.
‫Let's give it some ingredients.
‫So tomato, let's say also mushrooms.
‫And this is not important here.
‫This is just to show you
‫that we can now fully customize our components.
‫Next, we can define the price.
‫And notice that I'm doing it now in a different order.
‫So here I had first a photo name and the price.
‫And this is just to show you
‫that the order in which we pass in the props
‫is completely irrelevant.
‫So, photo name is pizzas
‫slash funghi dot jpg.
‫Okay? And now we need to immediately close this component
‫just like before.
‫And as I save it, watch what happened here.
‫And there is our second pizza component
‫now with completely different data.
‫And so now for the first time, we have reused a component
‫and configured it in a way that makes each component unique
‫and display their own data.
‫Okay? And now let's just improve
‫this pizza component here a little bit.
‫So for starters,
‫in our CSS, we actually have a class name here.
‫So a class name called pizza.
‫Okay? And then let's also place these two here,
‫inside their own div,
‫so that this data can be displayed at the site of the image.
‫So just like here in our original.
‫So this is what we're going for.
‫So here we have a div,
‫and then again, I'm using that trick
‫where I simply push down that line.
‫And this is already looking a lot nicer.
‫Let's just finally also add the price here
‫and I'm doing that as a span.
‫So props dot price.
‫And there it is.
‫But now let's say that we wanted for some reason
‫to add a number here.
‫So we wanted to increase all the prices by three, let's say.
‫But watch what happens when we try this.
‫So all the prices plus three.
‫So, what happens, is that
‫React, or JavaScript, basically simply added the three here
‫to the end of this number.
‫And the reason for that
‫is that here we pass these numbers actually in as a string.
‫And we can see that also here in this output.
‫So we do not want a string here.
‫Instead, we want a number.
‫And so the way we can achieve that
‫is by entering again, JavaScript mode.
‫And so in JavaScript, this is now an actual number.
‫And so watch what happens.
‫Indeed, now we have 13;
‫which is the 10 we had before, plus three.
‫Okay? Then let's do the same thing here.
‫And that fixes this.
‫So, this is very important to notice
‫that whenever you want to pass in
‫something that is not a string,
‫you just use, again, this JavaScript mode basically.
‫Because, in fact, you can pass in anything as a prop.
‫So it doesn't have to be a string or a number.
‫You can pass in a race
‫or objects or even other React components.
‫So props is really really powerful
‫and really one of the most fundamental things in React.
‫And now to review this concept and to go even a bit further
‫let's move on to the next lecture.