‫So now that we know what props are,
‫let's make our lives a little bit easier
‫when working with props in practice.
‫So as we already know,
‫each time that we pass some props into a component,
‫that component will then
‫automatically receive this object of props,
‫which will contain all the props that we passed in.
‫And actually, all components receive this props object.
‫So even here in footer, where we don't pass any props in,
‫we can define that and we can log it to the console.
‫So it will be empty then.
‫So let's see.
‫Yeah, so it is empty, but it always exists.
‫Alright, so that just as a side note here.
‫So what we want to do now is to avoid
‫having to write this props dot whatever else
‫all the time in our component.
‫So wouldn't it be nice
‫to directly receive this pizza object here
‫into the component, instead of just the props?
‫Well, we can actually do that with destructuring.
‫And again, if destructuring is a strange concept to you,
‫then please go back to the previous review section.
‫But anyway, now here,
‫instead of directly receiving these props,
‫we can immediately destructure them.
‫And so here, we can write pizza object,
‫which needs to match exactly the name of the prop
‫that's being passed in, so this one here.
‫And then from there on, all of these props here can go.
‫So I will select them all here, one after the other,
‫which I'm doing using the select next occurrence.
‫So that's this shortcut right here.
‫So you can just go ahead
‫and use the shortcut that you see right here for you.
‫So let's get rid of that.
‫And this will now create a small problem,
‫which is that here we are still
‫trying to lock to the console these props,
‫but the props object now no longer exists,
‫because, well, we immediately destructured it right here.
‫So now if we wanted to take a look at what we receive,
‫we would have to do it like this.
‫But the props object itself no longer exists.
‫But this is really, really nice,
‫because right now, all we have to do
‫is to look at this line right here
‫in order to know which props
‫this component will actually receive.
‫So before this, all we had was the generic props.
‫And then if we wanted to know
‫what kind of props we will receive here eventually,
‫we would have to go to the place
‫where the props are actually passed in.
‫But now, not anymore.
‫So now right here in this component definition,
‫we can immediately see that we will receive a pizza object.
‫And so that's the second really big advantage
‫of immediately destructuring props.
‫So let's do the same down here.
‫So again, not props,
‫but exactly the name of the prop that we pass in.
‫So close hour, and then here we can get rid of that.
‫And of course,
‫if we were passing in multiple props, and let's try that.
‫So let's also pass in the open hour,
‫and then here, open hour.
‫And so here, all we have to do is to add open hour then.
‫So here, let's say we're open
‫from then open hour,
‫to this.
‫Yep, and that worked just fine.
‫Now we can actually really define anything we want here.
‫Let's write test.
‫Let's add that here, for example.
‫And this will then simply be nothing.
‫So if we try to destructure a property here
‫that doesn't exist, it's simply undefined.
‫So let's get rid of that here.
‫But this was just to show you.
‫So from now on, for the rest of the course,
‫we will always receive props like this here.
‫Just make sure to never, ever forget the curly braces,
‫because then of course everything will break.
‫So that's a common beginner mistake.
‫And so yeah, you have been warned.
‫Never forget that,
‫because only with the curly braces,
‫we are actually destructuring.