1
00:00:00,480 --> 00:00:05,100
In last video we ran into a little bit of an issue when we tried to make our modal component a little

2
00:00:05,100 --> 00:00:06,080
more reusable.

3
00:00:06,270 --> 00:00:11,460
So I had wanted to pass in some variable called actions as a prop called actions and that was supposed

4
00:00:11,460 --> 00:00:16,800
to assign some content or show some content inside of the div with the class name actions inside the

5
00:00:16,800 --> 00:00:17,390
motile.

6
00:00:17,520 --> 00:00:21,720
And so ideally this would be a set of buttons that a user can click on or something like that.

7
00:00:21,930 --> 00:00:28,620
But we very quickly saw that when we wrapped those two buttons with a div semantic UI does not style

8
00:00:28,620 --> 00:00:29,820
the model correctly.

9
00:00:29,910 --> 00:00:35,370
And so this is what we end up with and it's all because we have that extra div in between our div with

10
00:00:35,370 --> 00:00:37,580
class name actions and the two buttons.

11
00:00:37,680 --> 00:00:41,340
So it specifically that div right there that is drawing the styling off.

12
00:00:41,340 --> 00:00:46,920
As I mentioned in the last video that div is specifically there because we are not allowed to assign

13
00:00:47,010 --> 00:00:50,460
multiple GSX elements like so to a single variable.

14
00:00:50,460 --> 00:00:53,200
This is not valid javascript syntax you see right here.

15
00:00:53,370 --> 00:00:57,570
And if you try to run this as a matter of fact like I'm going to save this file and I can flip back

16
00:00:57,570 --> 00:01:03,390
over and it will even give us a very clear message like you're saying a Jasen or sibling elements must

17
00:01:03,390 --> 00:01:05,660
be wrapped in an enclosing tag.

18
00:01:05,910 --> 00:01:10,920
So that's what we're trying to do here we are trying to place some sibling elements next to each other.

19
00:01:11,640 --> 00:01:17,370
But if we want to do so we have to wrap them with a single outside tag so we can have these two conflicting

20
00:01:17,370 --> 00:01:20,870
requirements here on the one hand we have to have that div on the other hand.

21
00:01:21,060 --> 00:01:23,800
We don't want the div because it throws off our styling.

22
00:01:24,030 --> 00:01:25,330
So how are we going to solve this.

23
00:01:25,560 --> 00:01:31,230
Well we're going to use a another little feature included inside re-act something called a re-act fragment

24
00:01:31,640 --> 00:01:38,190
or react fragment is essentially a GSX looking element that is going to allow us to return multiple

25
00:01:38,190 --> 00:01:40,890
elements or assigned multiple elements to a single variable.

26
00:01:41,100 --> 00:01:45,360
But when it gets rendered onto the screen it doesn't actually produce any age to you Mel.

27
00:01:45,540 --> 00:01:51,000
So you can think of Riak fragment as being like an invisible element that doesn't have any impact on

28
00:01:51,000 --> 00:01:52,740
the Dom whatsoever.

29
00:01:52,740 --> 00:01:58,910
So to make use of a fragment we can flip back over to stream delete and now in the dead of the div that

30
00:01:58,920 --> 00:02:05,070
we had wrapping the two buttons a place a j a sex tackier and I'll say re-act fragment as the opening

31
00:02:05,070 --> 00:02:05,480
tag.

32
00:02:05,580 --> 00:02:09,380
And then re-act fragment as the closing tag like so.

33
00:02:09,900 --> 00:02:11,020
And that's pretty much it.

34
00:02:11,160 --> 00:02:16,110
So now we no longer have to GSX tags trying to be assigned to actions.

35
00:02:16,110 --> 00:02:22,710
Instead we have a single tag being assigned to actions and a single tag contains two buttons internally.

36
00:02:22,720 --> 00:02:26,080
So now we're not going to see that same syntax here that we had just a second ago.

37
00:02:26,400 --> 00:02:32,250
In addition because Riak fragment does not actually produce any result or render element inside the

38
00:02:32,250 --> 00:02:36,660
Dom when it gets rendered to the screen it's not going to throw off our styling as well.

39
00:02:36,660 --> 00:02:38,230
So let's save this right here.

40
00:02:38,250 --> 00:02:43,640
If I now flip back over I still see my motile on a screen and those two buttons are styled correctly

41
00:02:43,730 --> 00:02:47,290
because I do not have that extra div being placed inside there.

42
00:02:47,630 --> 00:02:51,620
As a matter of fact if you want to do something a bit interesting you can click on the element inspector

43
00:02:51,770 --> 00:02:55,260
up here and then inspect that actions div..

44
00:02:55,610 --> 00:02:57,860
So here's the div with class actions.

45
00:02:57,860 --> 00:03:03,380
And if I expand it I see the two button elements so that re-act fragment did not render anything into

46
00:03:03,380 --> 00:03:05,110
the DOM whatsoever.

47
00:03:05,120 --> 00:03:05,360
OK.

48
00:03:05,390 --> 00:03:07,370
That's pretty much it for re-act fragment.

49
00:03:07,400 --> 00:03:14,000
Again you want to use this anytime you want to return multiple elements but not have some presence inside

50
00:03:14,090 --> 00:03:15,350
the actual dom.

51
00:03:15,380 --> 00:03:19,910
The last thing ought to mention here very quickly is that you can also sometimes or I say sometimes

52
00:03:19,910 --> 00:03:25,390
you can always shorten re-act fragment to be simply like that right there.

53
00:03:25,620 --> 00:03:31,890
So the kind of opening tag with no text inside of it and the closing tag down there as well.

54
00:03:31,890 --> 00:03:36,870
So we can save this flip back over and everything still appears to work as it did before.

55
00:03:36,900 --> 00:03:38,850
Even after I refresh the page.

56
00:03:39,150 --> 00:03:44,700
Now the reason that we might use re-act fragment instead just be clear like these are totally equivalent.

57
00:03:44,700 --> 00:03:47,650
You can put those empty tags or you can put re-act fragment.

58
00:03:47,700 --> 00:03:52,290
The only reason that you would want to use re-act fragment is that there is some tooling out there like

59
00:03:52,290 --> 00:03:58,380
some Linter some code quality checkers that do not think that empty tags like this are valid syntax.

60
00:03:58,500 --> 00:04:03,330
So some code quality checkers that you might be running even inside of your own code editor will think

61
00:04:03,330 --> 00:04:08,120
that this is invalid GSX and they will throw an error and say hey this is not valid.

62
00:04:08,190 --> 00:04:09,980
You're doing something wrong here.

63
00:04:09,990 --> 00:04:13,060
So the two approaches are identical they do the exact same thing.

64
00:04:13,110 --> 00:04:17,610
The only reason that you would write out re-act fragment again is because some tooling thinks that this

65
00:04:17,670 --> 00:04:20,210
is an error for the rest of this course.

66
00:04:20,220 --> 00:04:24,630
If we ever use a fragment again I'm going to write out the long form that you see right here like re-act

67
00:04:24,630 --> 00:04:25,350
fragment.

68
00:04:25,440 --> 00:04:28,680
Just so you understand we are creating a fragment right there.

69
00:04:28,770 --> 00:04:33,000
And in case you have any tooling that's throwing an error you're not going to see that error by writing

70
00:04:33,090 --> 00:04:34,090
out the long form.

71
00:04:34,170 --> 00:04:39,960
But if you want to absolutely feel free to do the shortened syntax like so OK so that's it for Riak

72
00:04:39,960 --> 00:04:40,730
fragments.

73
00:04:40,740 --> 00:04:41,920
Let's take a quick pause right here.

74
00:04:41,940 --> 00:04:46,920
When we come back the next section we're going to continue to generalize our modal lesing do is make

75
00:04:46,920 --> 00:04:50,940
sure that the on click callback right here can be customized by the parent component as well.