1
00:00:02,000 --> 00:00:04,950
Let's try to make our show function just a little bit more intelligent.

2
00:00:05,210 --> 00:00:11,720
I first want to just focus on making sure that the show function and display an object in some reasonable

3
00:00:11,720 --> 00:00:12,050
way.

4
00:00:12,100 --> 00:00:17,420
So if we put in an object like so, I want to see essentially that object appear as text in the preview

5
00:00:17,420 --> 00:00:19,610
window as opposed to object object.

6
00:00:20,360 --> 00:00:22,610
So for that, we can go back over to our code editor.

7
00:00:23,530 --> 00:00:27,860
I'm going to find our show function and then we will add in a little check inside of here.

8
00:00:28,420 --> 00:00:35,920
We're going to say that if the type of value is an object, then we're going to figure out some more

9
00:00:35,920 --> 00:00:38,260
intelligent way of printing this thing up on the screen.

10
00:00:38,740 --> 00:00:46,300
In this case, I'm going to copy in the document query selector route and we're going to set the HTML

11
00:00:46,780 --> 00:00:47,410
to be.

12
00:00:48,970 --> 00:00:53,020
Jason Stringer, FYE with the value that was provided.

13
00:00:54,460 --> 00:00:59,050
So we're going to take whatever value is provided, turn it into JSON, that's going to give us back

14
00:00:59,050 --> 00:01:02,290
a string and we'll display that string inside of our div.

15
00:01:03,590 --> 00:01:07,910
I'll then take our more simple case where we just display a value directly inside there and put it inside

16
00:01:07,910 --> 00:01:10,460
of an else statement like so.

17
00:01:13,000 --> 00:01:15,610
All right, let's save that look back over.

18
00:01:17,050 --> 00:01:21,280
And now we can see right away that we get a much better display of this very simple object.

19
00:01:22,370 --> 00:01:28,010
I can also add in some additional properties to it, like let's say color is red, number is three or

20
00:01:28,010 --> 00:01:31,490
whatever else, and that definitely gets printed up appropriately.

21
00:01:33,990 --> 00:01:39,090
We should also now have the ability to make, say, a array with objects inside of it, if I tried to

22
00:01:39,090 --> 00:01:39,630
show.

23
00:01:42,060 --> 00:01:43,080
And Ouray.

24
00:01:46,010 --> 00:01:50,890
And I'll make that object the first and second element, I'm going to copy it down inside of an array.

25
00:01:51,350 --> 00:01:53,570
Now we can see a tray full of objects.

26
00:01:53,600 --> 00:01:53,870
Yep.

27
00:01:53,870 --> 00:01:55,250
Definitely works as expected.

28
00:01:56,820 --> 00:02:00,480
That definitely works, however, if we think back to the other case, we want to handle where we can

29
00:02:00,480 --> 00:02:03,270
show real component, that's not going to work quite so well.

30
00:02:03,760 --> 00:02:09,479
So I can try to do and import react from react and then say maybe show in each one.

31
00:02:10,979 --> 00:02:16,830
That some text inside of it, but instead we just see the actual object representation of a react element.

32
00:02:17,070 --> 00:02:21,560
So whenever you write out some jokes like this, this is what actually gets created.

33
00:02:21,960 --> 00:02:24,890
Notice that we are making just a plain element here.

34
00:02:24,900 --> 00:02:26,280
We are not happy with the function.

35
00:02:26,280 --> 00:02:27,780
We're not creating a component just yet.

36
00:02:28,710 --> 00:02:30,660
So we need to somehow handle this case.

37
00:02:30,660 --> 00:02:33,690
We need to figure out whether or not we are working with some element.

38
00:02:33,690 --> 00:02:37,200
And if we are, I want to try to render it onto the screen intelligently.

39
00:02:37,710 --> 00:02:40,200
That process is going to be just a little bit more complicated.

40
00:02:40,470 --> 00:02:42,830
Let's take a pause right here and tackle that in just a moment.