Let's try to make our show function just a little bit more intelligent.
I first want to just focus on making sure that the show function and display an object in some reasonable
way.
So if we put in an object like so, I want to see essentially that object appear as text in the preview
window as opposed to object object.
So for that, we can go back over to our code editor.
I'm going to find our show function and then we will add in a little check inside of here.
We're going to say that if the type of value is an object, then we're going to figure out some more
intelligent way of printing this thing up on the screen.
In this case, I'm going to copy in the document query selector route and we're going to set the HTML
to be.
Jason Stringer, FYE with the value that was provided.
So we're going to take whatever value is provided, turn it into JSON, that's going to give us back
a string and we'll display that string inside of our div.
I'll then take our more simple case where we just display a value directly inside there and put it inside
of an else statement like so.
All right, let's save that look back over.
And now we can see right away that we get a much better display of this very simple object.
I can also add in some additional properties to it, like let's say color is red, number is three or
whatever else, and that definitely gets printed up appropriately.
We should also now have the ability to make, say, a array with objects inside of it, if I tried to
show.
And Ouray.
And I'll make that object the first and second element, I'm going to copy it down inside of an array.
Now we can see a tray full of objects.
Yep.
Definitely works as expected.
That definitely works, however, if we think back to the other case, we want to handle where we can
show real component, that's not going to work quite so well.
So I can try to do and import react from react and then say maybe show in each one.
That some text inside of it, but instead we just see the actual object representation of a react element.
So whenever you write out some jokes like this, this is what actually gets created.
Notice that we are making just a plain element here.
We are not happy with the function.
We're not creating a component just yet.
So we need to somehow handle this case.
We need to figure out whether or not we are working with some element.
And if we are, I want to try to render it onto the screen intelligently.
That process is going to be just a little bit more complicated.
Let's take a pause right here and tackle that in just a moment.