‫Now to practice the concept of components
‫and using props just a little bit more,
‫let's extract parts of the footer into a new component.
‫So the JSX here inside the footer component
‫is getting a little bit too long,
‫and so I got the idea of taking this part here
‫and extracting it into its own component.
‫So let's grab all of this and cut it,
‫and then we're simply going to create a new component.
‫So we write function, let's call it order,
‫and then all we have to do
‫is to just return that JSX that we just created.
‫All right, now, Prettier did not format this
‫because actually our code is wrong now,
‫because here we don't have anything
‫as the first value in the ternary operator,
‫and so let's immediately fix that.
‫So instead of that JSX that we had here before,
‫now what we want is to simply render the order component.
‫So order, and that's actually it.
‫Now, React is still not happy with us
‫and that's because down here,
‫close hour is, of course, no longer defined.
‫And it makes sense because close hour is only defined here
‫inside the footer component,
‫but now the JSX that we had here before is gone
‫and it is in the order component.
‫So how do we give this order component access
‫to this value right here?
‫And I hope that you guessed
‫that the answer is by using props.
‫So as we see here, props is actually also quite similar
‫to passing arguments into functions.
‫So all we have to do here is to create a prop.
‫So let's say open hour,
‫so we can just give it exactly the same name
‫as the variable.
‫So it doesn't have to be like this, but it can.
‫And so then here, let's receive props as a parameter,
‫and then we can simply read close hour from there.
‫And again, this works because we made the prop here
‫exactly the same name as the variable.
‫So if it was prop hours, then here, of course,
‫we would also have to use that, right?
‫But what matters is that it's working just fine.
‫Well, actually we are not seeing the result there,
‫so let's set it back to 12.
‫And so now, yeah, we're getting the order component
‫rendered there.
‫However, we see that here is a problem,
‫and I notice that's because I actually created a bug.
‫So here we have close hours,
‫but what we passed in is actually open hours.
‫So we're not interested in open but in close.
‫So this should be close hour, and here, close hour,
‫and here, also close hour as we had before.
‫And so now that's fixed, and so that's actually it.
‫So this is how we take a piece of JSX
‫when the JSX in a component is getting a little bit too big
‫and simply extract it into its own component.
‫And then if that JSX depends on some value
‫that was in the parent component, so like this close hour,
‫then we simply pass it in as a prop.
‫And so this is something that we're going to do all the time
‫when we build our React applications.
‫So not always do we have all the components figured out
‫in the beginning, but instead we start building them,
‫and then when they get to big, we can decide to extract
‫part of them into just another component.
‫And now, since this was the last component
‫that we're going to create in this project,
‫I invite you to take a pen and a paper
‫and to draw out the entire componentry
‫that we just built here.
‫So I think that's going to be a nice small exercise
‫for you to get a better hold
‫of how all the components in this application work together,
‫and yeah, really understand the structure
‫that we built here for this small project.
‫And then once you're done with that,
‫you can just simply move on to the next lecture.