1
00:00:01,050 --> 00:00:03,753
‫So now that we know what props are,

2
00:00:04,917 --> 00:00:06,060
‫let's make our lives a little bit easier

3
00:00:06,060 --> 00:00:09,240
‫when working with props in practice.

4
00:00:09,240 --> 00:00:11,640
‫So as we already know,

5
00:00:11,640 --> 00:00:15,330
‫each time that we pass some props into a component,

6
00:00:15,330 --> 00:00:16,620
‫that component will then

7
00:00:16,620 --> 00:00:20,310
‫automatically receive this object of props,

8
00:00:20,310 --> 00:00:24,240
‫which will contain all the props that we passed in.

9
00:00:24,240 --> 00:00:28,533
‫And actually, all components receive this props object.

10
00:00:29,430 --> 00:00:33,810
‫So even here in footer, where we don't pass any props in,

11
00:00:33,810 --> 00:00:37,713
‫we can define that and we can log it to the console.

12
00:00:38,640 --> 00:00:40,503
‫So it will be empty then.

13
00:00:41,606 --> 00:00:43,500
‫So let's see.

14
00:00:43,500 --> 00:00:47,670
‫Yeah, so it is empty, but it always exists.

15
00:00:47,670 --> 00:00:51,873
‫Alright, so that just as a side note here.

16
00:00:52,800 --> 00:00:55,200
‫So what we want to do now is to avoid

17
00:00:55,200 --> 00:00:59,760
‫having to write this props dot whatever else

18
00:00:59,760 --> 00:01:02,190
‫all the time in our component.

19
00:01:02,190 --> 00:01:03,420
‫So wouldn't it be nice

20
00:01:03,420 --> 00:01:06,900
‫to directly receive this pizza object here

21
00:01:06,900 --> 00:01:10,740
‫into the component, instead of just the props?

22
00:01:10,740 --> 00:01:14,550
‫Well, we can actually do that with destructuring.

23
00:01:14,550 --> 00:01:18,630
‫And again, if destructuring is a strange concept to you,

24
00:01:18,630 --> 00:01:22,710
‫then please go back to the previous review section.

25
00:01:22,710 --> 00:01:24,480
‫But anyway, now here,

26
00:01:24,480 --> 00:01:27,270
‫instead of directly receiving these props,

27
00:01:27,270 --> 00:01:30,060
‫we can immediately destructure them.

28
00:01:30,060 --> 00:01:33,240
‫And so here, we can write pizza object,

29
00:01:33,240 --> 00:01:36,090
‫which needs to match exactly the name of the prop

30
00:01:36,090 --> 00:01:39,300
‫that's being passed in, so this one here.

31
00:01:39,300 --> 00:01:44,263
‫And then from there on, all of these props here can go.

32
00:01:45,180 --> 00:01:48,330
‫So I will select them all here, one after the other,

33
00:01:48,330 --> 00:01:52,350
‫which I'm doing using the select next occurrence.

34
00:01:52,350 --> 00:01:54,690
‫So that's this shortcut right here.

35
00:01:54,690 --> 00:01:56,040
‫So you can just go ahead

36
00:01:56,040 --> 00:02:00,032
‫and use the shortcut that you see right here for you.

37
00:02:00,032 --> 00:02:03,000
‫So let's get rid of that.

38
00:02:03,000 --> 00:02:05,880
‫And this will now create a small problem,

39
00:02:05,880 --> 00:02:08,220
‫which is that here we are still

40
00:02:08,220 --> 00:02:11,100
‫trying to lock to the console these props,

41
00:02:11,100 --> 00:02:13,950
‫but the props object now no longer exists,

42
00:02:13,950 --> 00:02:18,513
‫because, well, we immediately destructured it right here.

43
00:02:19,380 --> 00:02:22,360
‫So now if we wanted to take a look at what we receive,

44
00:02:22,360 --> 00:02:24,750
‫we would have to do it like this.

45
00:02:24,750 --> 00:02:28,350
‫But the props object itself no longer exists.

46
00:02:28,350 --> 00:02:30,540
‫But this is really, really nice,

47
00:02:30,540 --> 00:02:32,859
‫because right now, all we have to do

48
00:02:32,859 --> 00:02:35,328
‫is to look at this line right here

49
00:02:35,328 --> 00:02:36,830
‫in order to know which props

50
00:02:36,830 --> 00:02:40,530
‫this component will actually receive.

51
00:02:40,530 --> 00:02:43,328
‫So before this, all we had was the generic props.

52
00:02:43,328 --> 00:02:44,902
‫And then if we wanted to know

53
00:02:44,902 --> 00:02:48,580
‫what kind of props we will receive here eventually,

54
00:02:48,580 --> 00:02:50,640
‫we would have to go to the place

55
00:02:50,640 --> 00:02:53,310
‫where the props are actually passed in.

56
00:02:53,310 --> 00:02:55,320
‫But now, not anymore.

57
00:02:55,320 --> 00:02:58,020
‫So now right here in this component definition,

58
00:02:58,020 --> 00:03:01,590
‫we can immediately see that we will receive a pizza object.

59
00:03:01,590 --> 00:03:03,993
‫And so that's the second really big advantage

60
00:03:03,993 --> 00:03:06,945
‫of immediately destructuring props.

61
00:03:06,945 --> 00:03:09,843
‫So let's do the same down here.

62
00:03:10,781 --> 00:03:13,620
‫So again, not props,

63
00:03:13,620 --> 00:03:16,773
‫but exactly the name of the prop that we pass in.

64
00:03:18,150 --> 00:03:22,890
‫So close hour, and then here we can get rid of that.

65
00:03:22,890 --> 00:03:24,372
‫And of course,

66
00:03:24,372 --> 00:03:28,173
‫if we were passing in multiple props, and let's try that.

67
00:03:30,378 --> 00:03:33,333
‫So let's also pass in the open hour,

68
00:03:36,768 --> 00:03:38,610
‫and then here, open hour.

69
00:03:38,610 --> 00:03:43,143
‫And so here, all we have to do is to add open hour then.

70
00:03:44,160 --> 00:03:45,760
‫So here, let's say we're open

71
00:03:47,490 --> 00:03:51,603
‫from then open hour,

72
00:03:54,570 --> 00:03:55,983
‫to this.

73
00:03:57,510 --> 00:04:00,267
‫Yep, and that worked just fine.

74
00:04:00,267 --> 00:04:04,770
‫Now we can actually really define anything we want here.

75
00:04:04,770 --> 00:04:06,061
‫Let's write test.

76
00:04:06,061 --> 00:04:10,170
‫Let's add that here, for example.

77
00:04:10,170 --> 00:04:12,780
‫And this will then simply be nothing.

78
00:04:12,780 --> 00:04:15,660
‫So if we try to destructure a property here

79
00:04:15,660 --> 00:04:18,453
‫that doesn't exist, it's simply undefined.

80
00:04:21,643 --> 00:04:23,853
‫So let's get rid of that here.

81
00:04:24,690 --> 00:04:26,850
‫But this was just to show you.

82
00:04:26,850 --> 00:04:28,890
‫So from now on, for the rest of the course,

83
00:04:28,890 --> 00:04:32,340
‫we will always receive props like this here.

84
00:04:32,340 --> 00:04:36,840
‫Just make sure to never, ever forget the curly braces,

85
00:04:36,840 --> 00:04:39,600
‫because then of course everything will break.

86
00:04:39,600 --> 00:04:41,225
‫So that's a common beginner mistake.

87
00:04:41,225 --> 00:04:44,370
‫And so yeah, you have been warned.

88
00:04:44,370 --> 00:04:45,540
‫Never forget that,

89
00:04:45,540 --> 00:04:47,490
‫because only with the curly braces,

90
00:04:47,490 --> 00:04:49,323
‫we are actually destructuring.