1 00:00:01,260 --> 00:00:05,080 The last thing we need to think about is how a user is going to show a react component. 2 00:00:05,490 --> 00:00:08,100 So let's imagine that we've got some kind of app component. 3 00:00:11,310 --> 00:00:13,170 And maybe they return in each one. 4 00:00:15,030 --> 00:00:16,290 That says component like so. 5 00:00:17,300 --> 00:00:22,820 Now, if a user wants to show this component on the screen, remember to show a map component, we write 6 00:00:22,820 --> 00:00:24,830 out a app inside of a jazz element. 7 00:00:25,220 --> 00:00:31,220 So in this case, to show this app component thing, a user would write out show up inside of Jesus 8 00:00:31,370 --> 00:00:31,820 tags. 9 00:00:32,580 --> 00:00:37,370 So now that's going to be treated as a jazz element and will be rendered onto the screen accordingly. 10 00:00:37,940 --> 00:00:42,440 So we don't really need to add in any extra case or anything like that to handle showing a custom component. 11 00:00:42,620 --> 00:00:45,920 It's just going to work as long as the user writes it out in the same way that they would usually write 12 00:00:45,920 --> 00:00:48,530 out a very simple element. 13 00:00:49,900 --> 00:00:54,760 Well, that's pretty much it for our show function now throughout all of our code, let's say we go 14 00:00:54,760 --> 00:00:58,390 down to the next code so we can show as often as we wish. 15 00:00:58,420 --> 00:01:01,860 So I could do a another show with app. 16 00:01:02,590 --> 00:01:04,450 I can even maybe show a div. 17 00:01:06,680 --> 00:01:07,460 That wraps. 18 00:01:08,490 --> 00:01:11,070 Two copies of the app or maybe even more. 19 00:01:12,280 --> 00:01:14,350 And we'll show however many copies you want. 20 00:01:15,380 --> 00:01:17,090 This definitely looks like a pretty good solution. 21 00:01:17,450 --> 00:01:21,490 There's just one very small thing about it that is a little bit awkward right now. 22 00:01:21,860 --> 00:01:26,060 You might notice that if I don't show anything inside of the second code, Ed. 23 00:01:27,100 --> 00:01:31,630 And it's going to fall back to showing whatever was shown in the previous code, so so the one up here, 24 00:01:32,260 --> 00:01:35,310 remember, we are now doing that kind of cumulative code execution. 25 00:01:35,590 --> 00:01:40,600 So the second code cell is running all the code inside of here, plus all the code from the previous 26 00:01:40,600 --> 00:01:40,930 cell. 27 00:01:42,030 --> 00:01:46,470 Now, I don't know about you, but just showing the result or whatever we are showing from the previous 28 00:01:46,470 --> 00:01:49,620 cell inside this next one is just a little bit strange. 29 00:01:49,950 --> 00:01:54,180 There might be some scenario where a user wants to write out a little bit of code inside of your but 30 00:01:54,180 --> 00:01:55,410 not show anything at all. 31 00:01:55,710 --> 00:01:58,690 And if we end up showing whatever the result was from the previous component. 32 00:01:58,970 --> 00:02:01,440 Well, again, just a little bit unexpected. 33 00:02:02,010 --> 00:02:04,690 So I want to set up one last little challenge for us. 34 00:02:05,100 --> 00:02:06,480 This one is going to be a little bit challenging. 35 00:02:06,900 --> 00:02:13,770 I want to say that if a user calls show inside of a previous code cell, I do not want that show to 36 00:02:13,770 --> 00:02:16,900 be reflected inside of subsequent code cells. 37 00:02:17,460 --> 00:02:21,990 So in other words, right now we are calling show inside of code cell one. 38 00:02:22,500 --> 00:02:27,870 I don't want to show the result of that inside of the preview window of code cell two down here. 39 00:02:28,230 --> 00:02:32,940 I only want to display the app component inside of the preview for Code Cell one. 40 00:02:33,720 --> 00:02:38,490 Now, this is going to be challenging because at present we are very much joined together the contents 41 00:02:38,490 --> 00:02:43,470 of these two files, so we can have to figure out some way to say, well, if this show statement is 42 00:02:43,470 --> 00:02:46,950 coming from an earlier code, so don't actually show anything at all. 43 00:02:48,410 --> 00:02:50,840 There's definitely several ways of implementing this. 44 00:02:51,200 --> 00:02:54,980 Let's take a look, as usual, at a couple of different possible solutions in the next video.