1
00:00:01,020 --> 00:00:04,350
‫Let's now learn what a React Fragment is

2
00:00:04,350 --> 00:00:07,023
‫and when exactly we might need one.

3
00:00:08,580 --> 00:00:11,850
‫So let's actually come here to the final version

4
00:00:11,850 --> 00:00:14,640
‫of the application so that I can show you

5
00:00:14,640 --> 00:00:17,340
‫that we are actually still missing something

6
00:00:17,340 --> 00:00:20,100
‫and that's this sentence right here.

7
00:00:20,100 --> 00:00:23,010
‫So there's a paragraph of text right here

8
00:00:23,010 --> 00:00:25,583
‫that I'm just going to copy now

9
00:00:25,583 --> 00:00:29,250
‫and you can maybe pause the video and type it,

10
00:00:29,250 --> 00:00:31,473
‫or you can just type something shorter.

11
00:00:32,700 --> 00:00:35,883
‫So let's for now place that paragraph here,

12
00:00:36,930 --> 00:00:41,930
‫give it a save, and yeah, then it looks exactly the same.

13
00:00:43,170 --> 00:00:46,443
‫But now what if we have no pizzas at all?

14
00:00:47,490 --> 00:00:49,320
‫So in this case,

15
00:00:49,320 --> 00:00:53,130
‫well, then we actually don't want to show this,

16
00:00:53,130 --> 00:00:57,180
‫so this sentence right here, we only want this one,

17
00:00:57,180 --> 00:00:58,650
‫so the one that's coming here

18
00:00:58,650 --> 00:01:00,333
‫from our conditional rendering.

19
00:01:01,800 --> 00:01:04,383
‫So let's put that back.

20
00:01:06,540 --> 00:01:09,960
‫And now what that means is that we only want

21
00:01:09,960 --> 00:01:13,023
‫to render this paragraph here in this situation.

22
00:01:14,280 --> 00:01:18,093
‫So let's grab that paragraph and place that here,

23
00:01:19,590 --> 00:01:22,350
‫because again we want to render this paragraph

24
00:01:22,350 --> 00:01:24,570
‫and this UL in this case,

25
00:01:24,570 --> 00:01:28,260
‫but immediately React starts yelling at us.

26
00:01:28,260 --> 00:01:32,250
‫So JSX expressions must have one parent element.

27
00:01:32,250 --> 00:01:34,830
‫And so this is exactly what we learned

28
00:01:34,830 --> 00:01:38,220
‫in the Rules of JSX lecture.

29
00:01:38,220 --> 00:01:42,240
‫So a piece of JSX, no matter where it is defined

30
00:01:42,240 --> 00:01:46,470
‫can only have in fact one root element.

31
00:01:46,470 --> 00:01:48,390
‫And this has happened to us before

32
00:01:48,390 --> 00:01:50,130
‫and the way we always solve this

33
00:01:50,130 --> 00:01:52,380
‫was by simply wrapping everything

34
00:01:52,380 --> 00:01:57,380
‫in a div or some other component, so let's try that.

35
00:01:58,380 --> 00:02:00,060
‫You don't have to do this.

36
00:02:00,060 --> 00:02:01,650
‫And this is just to show you

37
00:02:01,650 --> 00:02:05,190
‫that this will then actually mess up our formatting here.

38
00:02:05,190 --> 00:02:07,860
‫So this is actually not really what we want.

39
00:02:07,860 --> 00:02:11,130
‫We do not want to render one element

40
00:02:11,130 --> 00:02:13,050
‫which contains these two,

41
00:02:13,050 --> 00:02:16,260
‫but we really want to render these two elements here,

42
00:02:16,260 --> 00:02:18,840
‫so these two elements in separate

43
00:02:18,840 --> 00:02:23,840
‫without having one element as a parent of these two, right.

44
00:02:24,300 --> 00:02:29,130
‫And so this is the case in which we need a React Fragment.

45
00:02:29,130 --> 00:02:33,390
‫So a React Fragment basically lets us group some elements

46
00:02:33,390 --> 00:02:38,390
‫without leaving any trace in the HTML tree, so in the DOM.

47
00:02:39,150 --> 00:02:42,840
‫So it looks like here we need a React Fragment

48
00:02:42,840 --> 00:02:44,340
‫and that's very easy.

49
00:02:44,340 --> 00:02:48,250
‫All we have to do is to basically delete everything here

50
00:02:50,070 --> 00:02:53,730
‫just like this and so this is now a fragment.

51
00:02:53,730 --> 00:02:57,900
‫So let's save, and then we are back to what we had before.

52
00:02:57,900 --> 00:03:00,510
‫So now let's then inspect the DOM tree,

53
00:03:00,510 --> 00:03:03,060
‫as I was saying, just to show you

54
00:03:03,060 --> 00:03:07,410
‫that actually this didn't create any new element at all.

55
00:03:07,410 --> 00:03:09,090
‫So here we have the header

56
00:03:09,090 --> 00:03:12,963
‫and I see we still have that footer class there.

57
00:03:14,070 --> 00:03:15,783
‫Of course, let's get rid of that.

58
00:03:17,820 --> 00:03:18,663
‫All right.

59
00:03:20,760 --> 00:03:23,430
‫So we have our container, then we have the menu,

60
00:03:23,430 --> 00:03:27,630
‫then we have the h2, so this one, and then exactly,

61
00:03:27,630 --> 00:03:31,350
‫we have the paragraph and the UL, but in separate,

62
00:03:31,350 --> 00:03:33,930
‫so not wrapped in anything.

63
00:03:33,930 --> 00:03:36,000
‫So this is completely invisible here

64
00:03:36,000 --> 00:03:39,000
‫and it's exactly what we were looking for.

65
00:03:39,000 --> 00:03:42,060
‫And that's it, that's all a React Fragment is

66
00:03:42,060 --> 00:03:44,490
‫and it's all that it does.

67
00:03:44,490 --> 00:03:48,750
‫Now, sometimes we need to add a key to a React Fragment,

68
00:03:48,750 --> 00:03:52,350
‫so, for example, when we are using it to render a list

69
00:03:52,350 --> 00:03:54,780
‫and so then we need to actually write it

70
00:03:54,780 --> 00:03:56,180
‫in a slightly different way.

71
00:03:57,060 --> 00:04:00,540
‫So first, let's make sure that we have React imported

72
00:04:00,540 --> 00:04:02,680
‫and we do, so it's right here

73
00:04:03,540 --> 00:04:08,043
‫and so we can write React.Fragment.

74
00:04:11,190 --> 00:04:16,020
‫And then down here we need to close that React.Fragment

75
00:04:16,020 --> 00:04:19,020
‫and so then the result is exactly the same.

76
00:04:19,020 --> 00:04:22,390
‫But if we need it, then here we could add a key

77
00:04:23,610 --> 00:04:25,500
‫of just anything.

78
00:04:25,500 --> 00:04:27,690
‫All right, now we don't need a key,

79
00:04:27,690 --> 00:04:30,750
‫so we can just go for the short version,

80
00:04:30,750 --> 00:04:35,340
‫which is of course a lot nicer, all right.

81
00:04:35,340 --> 00:04:37,680
‫Let's try maybe something else.

82
00:04:37,680 --> 00:04:42,270
‫Let's say that here, we actually didn't want this container,

83
00:04:42,270 --> 00:04:45,030
‫so maybe we just needed all our elements

84
00:04:45,030 --> 00:04:47,610
‫right here directly in the root.

85
00:04:47,610 --> 00:04:50,520
‫So basically what we wanted in this case

86
00:04:50,520 --> 00:04:53,910
‫is the app component to return three components,

87
00:04:53,910 --> 00:04:58,050
‫so these three elements made out of these three components.

88
00:04:58,050 --> 00:05:00,123
‫And so then that would be very simple.

89
00:05:01,560 --> 00:05:02,580
‫Now, in our case,

90
00:05:02,580 --> 00:05:05,160
‫it's of course going to mess up the formatting

91
00:05:05,160 --> 00:05:08,250
‫because then we are missing the container class,

92
00:05:08,250 --> 00:05:10,170
‫but just as an example,

93
00:05:10,170 --> 00:05:13,380
‫this is what it would look like in the end.

94
00:05:13,380 --> 00:05:14,820
‫So we would have our root

95
00:05:14,820 --> 00:05:18,093
‫with immediately these three as direct children.

96
00:05:19,770 --> 00:05:21,690
‫But let's put everything back.

97
00:05:21,690 --> 00:05:23,400
‫And yeah, I think that's all

98
00:05:23,400 --> 00:05:25,650
‫that you need to know about React Fragments.

99
00:05:25,650 --> 00:05:27,300
‫It's a very simple concept,

100
00:05:27,300 --> 00:05:29,490
‫which basically allows us to have more

101
00:05:29,490 --> 00:05:33,363
‫than just one element inside a piece of JSX.