1 00:00:01,310 --> 00:00:06,290 Well, the solution has been very easy to put together so easy, in fact, I want to add another feature 2 00:00:06,290 --> 00:00:07,340 on top of all this stuff. 3 00:00:07,760 --> 00:00:12,170 So you might have noticed that at this point time, showing any content inside the preview window is 4 00:00:12,170 --> 00:00:13,330 a little bit laborious. 5 00:00:13,610 --> 00:00:20,210 We've been having to write out rather long statement such as document query, selector sound root and 6 00:00:20,210 --> 00:00:24,630 then do that in our HTML equals whatever value maybe in this case, eh? 7 00:00:24,680 --> 00:00:26,300 And I see one up right there. 8 00:00:26,960 --> 00:00:31,040 Having to write out this entire document query selector thing is just a lot of code. 9 00:00:31,370 --> 00:00:36,740 I think it would be a lot nicer if we had some kind of built in function inside of our execution environment, 10 00:00:37,280 --> 00:00:44,270 maybe something like show or render some kind of function that we could very easily call assign some 11 00:00:44,270 --> 00:00:50,390 value we want to show on the screen and have this show function automatically, take a and display it 12 00:00:50,510 --> 00:00:55,060 inside of that pound root element or that did with ID of root. 13 00:00:55,760 --> 00:01:01,130 So let's figure out some way that we can build in a show function of sorts and call it at any point 14 00:01:01,130 --> 00:01:03,140 in time, have content, show up on the screen. 15 00:01:04,019 --> 00:01:09,270 Now, as we start to think about again, some show like function, first thing I want to really understand 16 00:01:09,270 --> 00:01:12,690 here is that there are a variety of different values we can call that show function with. 17 00:01:13,050 --> 00:01:15,390 So we might call that show thing with a number. 18 00:01:16,700 --> 00:01:24,140 Or a string or an object that has some properties inside of it or an array of values, we might even 19 00:01:24,140 --> 00:01:28,820 want to be able to show with some kind of react component as well, or in this case, really just a 20 00:01:28,820 --> 00:01:29,660 plain element. 21 00:01:31,580 --> 00:01:36,350 Or maybe with an actual component, so a div return from a function. 22 00:01:39,670 --> 00:01:44,650 So there's definitely a variety of different ways we want to call, show and take whatever value is 23 00:01:44,650 --> 00:01:46,270 provided and show it on the screen. 24 00:01:46,970 --> 00:01:48,280 So let's go back over to our Ed. 25 00:01:48,310 --> 00:01:51,760 We're going to try to put something together very quickly that hopefully just might work. 26 00:01:52,480 --> 00:01:53,890 OK, so back inside my ed. 27 00:01:55,780 --> 00:01:58,330 I'm going to find our cumulative code function. 28 00:01:58,880 --> 00:02:04,930 So here's the selector, and then right before we return, anything right here or maybe even when we 29 00:02:05,020 --> 00:02:10,570 initially defined the array itself, let's take a very simple and straightforward approach inside of 30 00:02:10,570 --> 00:02:10,810 here. 31 00:02:11,140 --> 00:02:13,240 I'm going to add in a multiline string. 32 00:02:15,510 --> 00:02:20,670 And inside that string, I'm going to write out some kind of very simple implementation for a show function, 33 00:02:21,180 --> 00:02:22,590 going to put in a show. 34 00:02:24,860 --> 00:02:28,700 And they're going to receive some kind of value that we want to display on the screen. 35 00:02:29,930 --> 00:02:36,260 And then right now, we'll just take that value and try to set it as the HTML inside of that div with 36 00:02:36,260 --> 00:02:40,100 ID of root, so we'll do a document for you selecter. 37 00:02:41,890 --> 00:02:46,660 And roots in our HTML equals value like so. 38 00:02:49,300 --> 00:02:53,710 So very quickly, think about what's going on with our code right now, we are initializing cumulative 39 00:02:53,710 --> 00:02:58,030 code to be this string right now or an array with just that string. 40 00:02:58,480 --> 00:03:04,450 And then as we start to find some more code cells before the current one that is being rendered by our 41 00:03:04,450 --> 00:03:08,170 code cell component, we're just going to add in those additional cells worth of code. 42 00:03:08,590 --> 00:03:13,660 So now all the subsequent cells we're going to add into this array should have access to this show function. 43 00:03:14,120 --> 00:03:16,230 So let's say this flipped back over. 44 00:03:17,050 --> 00:03:18,280 I'm going to do a quick refresh. 45 00:03:19,280 --> 00:03:23,690 And now inside of our code shells, we should code excuse me, we should be able to do something like, 46 00:03:23,690 --> 00:03:28,210 say, show one, two, three, and that appears to work just fine. 47 00:03:28,760 --> 00:03:31,940 You'll notice that because we are doing cumulative code execution. 48 00:03:31,940 --> 00:03:35,090 We also see it one, two, three, appear in the second code cell as well. 49 00:03:36,020 --> 00:03:41,840 In the second Kozel, we could also do a show with a string inside of it and yep, that definitely works. 50 00:03:43,330 --> 00:03:48,790 So the show function is going to work out just fine for very simple primitive values, such as a number 51 00:03:48,790 --> 00:03:53,410 a string, we can probably even do maybe an array of numbers or an array of strings. 52 00:03:54,400 --> 00:03:57,430 Doesn't get printed up in the nicest fashion, but it definitely works. 53 00:03:58,910 --> 00:04:04,730 However, as soon as we start to show some kind of object, maybe it has a color property of red that's 54 00:04:04,730 --> 00:04:06,350 not really going to print up as expected. 55 00:04:07,130 --> 00:04:13,610 In addition, if we tried to show a react element, so if I put in, say, a div with some content, 56 00:04:13,910 --> 00:04:16,640 we immediately get an error message saying that react is not defined. 57 00:04:16,970 --> 00:04:18,470 Let's just say that we have to import react. 58 00:04:18,470 --> 00:04:21,410 If we want to write out some jokes, we could definitely try that. 59 00:04:22,920 --> 00:04:28,920 But even then, we end up with another object object like so, so although our very simple implementation 60 00:04:28,920 --> 00:04:33,120 of the show function is kind of working, definitely needs to a little bit of tweaking to handle some 61 00:04:33,120 --> 00:04:34,500 more complex values. 62 00:04:34,930 --> 00:04:39,060 So let's add in a couple of checks to our show function in the next video and maybe try to figure out 63 00:04:39,060 --> 00:04:41,820 some more intelligent way of printing out a given value.