Let's update our show function again, we're going to make sure that it can recognize a jazz element.
Now, again, the key word here is an element.
We're not worrying about a react component just yet.
So we need to first figure out some way to update our show function to recognize that we've been given
a react element as opposed to just a plain object.
So step number one here, let's actually console log a sex element and see what is actually given to
us.
In other words, what real properties does it have that we can use to figure out whether or not this
value thing is a react element to back inside my browser?
I'm going to change that show right there to a console lug of a react element and then we'll see what
properties actually react.
Element has.
So it appears that a react element is always going to have a dollar sign, dollar sign type of property.
It might have a key that is null rep that is null.
We'll definitely have a type and possibly props as well.
So I think that we could probably add in a very simple check into our show function.
We might say that if an object has a defined dollar sign, dollar sign type of property and maybe a
defined props property, then we are going to assume that this is a sex element and we want to use react
to render this thing onto the screen.
So let's try that out.
Back inside of my show function right before our current if statement check.
I'll add in about just right inside of it that we won't have to write out the repeat check to see if
this thing is an object, I'm going to say if.
Value dot, dollar sign, dollar sign type of.
So if that is defined and value crops is defined, then we're going to treat this thing as though it
were a react element or a sex element.
Otherwise, we're going to assume that it really is just a plain object.
And we want to do the very simple strategy of just turning that thing into some JSON.
OK, so then inside of this if statement right here, we need to somehow make use of react to render
this thing onto the screen.
So I'll try out a very simple and straightforward approach to get started.
We'll just do something like React, Dom, render.
I want to render that value and we want to display it inside of our div with ID root.
So I'll just copy that document query selector in like so.
Now at this point in time you might notice that we've got a lot of duplicate query selectors inside
of here, so we might decide to just extract out and define a variable right above the statement itself.
It's going to put up your const route is that selector?
And we can go back through and replace all the document query selector pound routes with just a reference
to the variable itself will go to route.
And root.
OK, let's save this.
Go back over and see how it's doing.
It's back over.
I'm going to do a quick refresh.
I'll then tried to do a show with an H one with some text inside.
Right away, we're going to once again see and hear about react so we can import, react from react.
And then after that, we're going to see a second, our second one says react Dom is not defined.
Well, for that, I guess we need to add in another important statements.
We'll do an import, react from react some.
Hey, looks like it actually works.
So as long as we add in and import, react and react, Dom, then we can show a jousts element that
doesn't seem like the best thing in the world, because now we're assuming that every single time that
a user tries to show a plane sex element, they will have already imported react and react.
Dom.
If they have not imported those, then we're going to show them an error message like this, which isn't
super helpful, it doesn't very clearly tell the user that they need to import, react or react before
they try to call our show function with some element.
So I've got a little idea here.
Maybe we should say that if we ever try to write out any kind of juice whatsoever or maybe just in general,
maybe we should always attempt to import, react and react Dom into a bundle in all circumstances,
no matter what.
So whether or not a user is making use of X, maybe we should just go ahead and assume that we want
to import, react and react, um, so the user can very easily make use of them to show just elements.
This would have a little bit of a downside because it's assuming that we always want to get react and
react, Dom, even if a user is not actually trying to show some kind of react element.
But it would definitely completely sidestep this issue of having to worry about a user running to this
kind of nasty error message and not really have any idea of how to deal with it.
Well, let's take a pause right here and figure out what the best approach will be in the next video.