Well, the solution has been very easy to put together so easy, in fact, I want to add another feature
on top of all this stuff.
So you might have noticed that at this point time, showing any content inside the preview window is
a little bit laborious.
We've been having to write out rather long statement such as document query, selector sound root and
then do that in our HTML equals whatever value maybe in this case, eh?
And I see one up right there.
Having to write out this entire document query selector thing is just a lot of code.
I think it would be a lot nicer if we had some kind of built in function inside of our execution environment,
maybe something like show or render some kind of function that we could very easily call assign some
value we want to show on the screen and have this show function automatically, take a and display it
inside of that pound root element or that did with ID of root.
So let's figure out some way that we can build in a show function of sorts and call it at any point
in time, have content, show up on the screen.
Now, as we start to think about again, some show like function, first thing I want to really understand
here is that there are a variety of different values we can call that show function with.
So we might call that show thing with a number.
Or a string or an object that has some properties inside of it or an array of values, we might even
want to be able to show with some kind of react component as well, or in this case, really just a
plain element.
Or maybe with an actual component, so a div return from a function.
So there's definitely a variety of different ways we want to call, show and take whatever value is
provided and show it on the screen.
So let's go back over to our Ed.
We're going to try to put something together very quickly that hopefully just might work.
OK, so back inside my ed.
I'm going to find our cumulative code function.
So here's the selector, and then right before we return, anything right here or maybe even when we
initially defined the array itself, let's take a very simple and straightforward approach inside of
here.
I'm going to add in a multiline string.
And inside that string, I'm going to write out some kind of very simple implementation for a show function,
going to put in a show.
And they're going to receive some kind of value that we want to display on the screen.
And then right now, we'll just take that value and try to set it as the HTML inside of that div with
ID of root, so we'll do a document for you selecter.
And roots in our HTML equals value like so.
So very quickly, think about what's going on with our code right now, we are initializing cumulative
code to be this string right now or an array with just that string.
And then as we start to find some more code cells before the current one that is being rendered by our
code cell component, we're just going to add in those additional cells worth of code.
So now all the subsequent cells we're going to add into this array should have access to this show function.
So let's say this flipped back over.
I'm going to do a quick refresh.
And now inside of our code shells, we should code excuse me, we should be able to do something like,
say, show one, two, three, and that appears to work just fine.
You'll notice that because we are doing cumulative code execution.
We also see it one, two, three, appear in the second code cell as well.
In the second Kozel, we could also do a show with a string inside of it and yep, that definitely works.
So the show function is going to work out just fine for very simple primitive values, such as a number
a string, we can probably even do maybe an array of numbers or an array of strings.
Doesn't get printed up in the nicest fashion, but it definitely works.
However, as soon as we start to show some kind of object, maybe it has a color property of red that's
not really going to print up as expected.
In addition, if we tried to show a react element, so if I put in, say, a div with some content,
we immediately get an error message saying that react is not defined.
Let's just say that we have to import react.
If we want to write out some jokes, we could definitely try that.
But even then, we end up with another object object like so, so although our very simple implementation
of the show function is kind of working, definitely needs to a little bit of tweaking to handle some
more complex values.
So let's add in a couple of checks to our show function in the next video and maybe try to figure out
some more intelligent way of printing out a given value.