1
00:00:01,010 --> 00:00:06,480
In the last section we added some code into our apt Yes file that will take the response and then log

2
00:00:06,480 --> 00:00:09,840
out just our list of images that we get from the splash API.

3
00:00:10,100 --> 00:00:15,360
So now we want to make sure that after we get the response we set it on our component state which will

4
00:00:15,360 --> 00:00:18,100
cause our componentry to render and then we can print out.

5
00:00:18,120 --> 00:00:21,920
Right now remember we just want to print out the number of images that were fetched.

6
00:00:22,290 --> 00:00:28,110
So to add in state to my app component I need to first initialize my state at the top of this class

7
00:00:28,680 --> 00:00:32,850
so appear all say state equals an object like so.

8
00:00:32,970 --> 00:00:36,530
Now we have to decide on a property name for this state.

9
00:00:36,750 --> 00:00:38,940
Well in this case we're fetching a list of images.

10
00:00:38,940 --> 00:00:44,140
So I think it makes sense to say that we will have an image as property in our state object.

11
00:00:44,160 --> 00:00:48,570
I also expect this image is property to eventually contain an array.

12
00:00:48,630 --> 00:00:57,230
So as a default value I'm going to put a empty array in here in the past we defaulted properties in

13
00:00:57,230 --> 00:01:00,920
our state object to be either a empty string or the value.

14
00:01:01,370 --> 00:01:07,790
Whenever we expect a state property to eventually contain say an object or an array we usually initialize

15
00:01:07,790 --> 00:01:14,620
that property to be a empty array or an empty object that allows us to call certain functions on this

16
00:01:14,620 --> 00:01:19,400
state property right here without worrying about getting some like function not found or something like

17
00:01:19,400 --> 00:01:20,510
that air.

18
00:01:20,660 --> 00:01:26,690
In other words imagine if I assign a value of node to images and then later on inside of your I call

19
00:01:26,720 --> 00:01:33,920
this state that images does map the map function is a function that is built into the array object in

20
00:01:33,920 --> 00:01:34,760
Javascript.

21
00:01:34,940 --> 00:01:40,160
So if I tried to call map on a value of No I would end up with an error message but if I tried to call

22
00:01:40,230 --> 00:01:43,650
map on an empty array no problem whatsoever.

23
00:01:43,670 --> 00:01:49,010
So if we expect to have a property that's going to eventually be an array we default it to be an empty

24
00:01:49,070 --> 00:01:51,060
array.

25
00:01:51,070 --> 00:01:51,440
All right.

26
00:01:51,440 --> 00:01:52,300
So this looks good.

27
00:01:52,500 --> 00:01:57,370
I can remove that little map statement I had down there and now instead of the console log I'm going

28
00:01:57,370 --> 00:02:07,660
to update my state with this set States and I'll put in here images is going to be a response data results

29
00:02:07,780 --> 00:02:09,500
like so.

30
00:02:09,550 --> 00:02:16,000
So now after making a request over to Splash we get the response we pull out the actual results or the

31
00:02:16,030 --> 00:02:17,110
list of images.

32
00:02:17,110 --> 00:02:21,470
We set it on our state object and that will cause our component to re render.

33
00:02:21,490 --> 00:02:25,360
So then the very last thing we do is down here underneath the search bar.

34
00:02:25,370 --> 00:02:28,480
I when I want to print out the number of images that we fetch.

35
00:02:28,750 --> 00:02:37,370
So I'll say bounced this states images length images.

36
00:02:37,510 --> 00:02:41,810
And here's another reason to default our images property to be an array.

37
00:02:41,930 --> 00:02:48,140
If we had defaulted it to be null when we tried to access this statement images at length we would have

38
00:02:48,140 --> 00:02:52,430
seen an error message and said cannot access property length of no.

39
00:02:52,700 --> 00:02:56,360
So another good reason to default that to be an array.

40
00:02:56,380 --> 00:02:57,580
OK so it looks good.

41
00:02:57,580 --> 00:03:01,810
Let's save this and I'll flip back over to our browser and do a little test.

42
00:03:03,240 --> 00:03:03,590
All right.

43
00:03:03,590 --> 00:03:05,520
So back over here I see the default.

44
00:03:05,550 --> 00:03:06,870
Right now we have zero images.

45
00:03:06,870 --> 00:03:08,820
So it says found zero images.

46
00:03:08,910 --> 00:03:10,360
So I'm going to enter in here.

47
00:03:10,570 --> 00:03:17,510
All in due course again I'll hit enter and lo and behold what little error message do we have here.

48
00:03:18,280 --> 00:03:20,620
Set state is not a function.

49
00:03:20,830 --> 00:03:26,410
Hmm well I don't know about you but this error message seems awfully familiar.

50
00:03:26,530 --> 00:03:32,260
It's complaining that some thing in here is not a function it doesn't look identical it's an identical

51
00:03:32,290 --> 00:03:37,900
error message to one we saw before but it seems to be complaining that our value of this or some property

52
00:03:37,900 --> 00:03:42,940
on this that we are trying to reference is not as it appears as a quick test.

53
00:03:42,940 --> 00:03:47,100
I want to flip back over here and I want to add in a console log of this.

54
00:03:47,140 --> 00:03:53,760
We're going to see if the value of this inside of this callback right here is what we expect it to be.

55
00:03:53,760 --> 00:03:56,440
All right so I'll save that I'll do another search for cars.

56
00:03:57,450 --> 00:04:04,580
And now over here in our log we'll see the console log and you'll notice that the value of this thinks

57
00:04:04,590 --> 00:04:07,270
that it's something called on Samit.

58
00:04:07,380 --> 00:04:13,800
If this was actually equal to the instance of our app component or the app class we would see some information

59
00:04:13,800 --> 00:04:17,130
here that very clearly said this is an instance of the app class.

60
00:04:17,130 --> 00:04:19,420
But in this case it says you know something else.

61
00:04:19,440 --> 00:04:24,000
This is equal to some object that contains a property called on Samit.

62
00:04:24,030 --> 00:04:29,050
So this is the exact same problem that we went over a couple videos ago.

63
00:04:29,220 --> 00:04:32,100
We've got a callback function right here.

64
00:04:32,100 --> 00:04:38,400
This is a callback function on search submit that we passed down to some child component that search

65
00:04:38,400 --> 00:04:42,860
bar is then going to call that function at some point in time in the future.

66
00:04:42,870 --> 00:04:47,760
And when the search bar calls that thing check it out over here here's the search bar.

67
00:04:47,760 --> 00:04:49,840
We call this props on submit.

68
00:04:49,860 --> 00:04:56,350
And a quick question to you what did we say the rule was for the value of this inside of some function

69
00:04:56,440 --> 00:04:59,190
the value of this we find the function here is the function.

70
00:04:59,200 --> 00:05:04,300
Here's where it gets called we look for the dot just to the left of it and then whatever is on the other

71
00:05:04,300 --> 00:05:08,500
side of the door is the value of this inside the function.

72
00:05:08,500 --> 00:05:14,800
So this not props are the prof's object that was passed to the search bar is going to be the value of

73
00:05:14,800 --> 00:05:16,210
this inside of.

74
00:05:16,210 --> 00:05:17,310
On submit.

75
00:05:17,380 --> 00:05:20,380
Inside of this callback right here.

76
00:05:20,440 --> 00:05:24,910
And that's what we just saw with that console log that right there at that object that is the props

77
00:05:24,910 --> 00:05:29,710
object that we passed down to the search bar component just to make sure that's really clear.

78
00:05:29,710 --> 00:05:37,560
I'm going to say like it guess what I am I'm the props object or I'm going to put in some silly prop

79
00:05:37,560 --> 00:05:40,260
in there like so I'm going to save this and rerun it.

80
00:05:41,130 --> 00:05:44,900
So I'll put in another search term here and check that out.

81
00:05:44,900 --> 00:05:45,770
Now you'll see.

82
00:05:45,830 --> 00:05:46,970
Yep that sure is.

83
00:05:46,970 --> 00:05:48,500
Our props object.

84
00:05:48,530 --> 00:05:51,960
So like I said same issue we ran into before.

85
00:05:51,980 --> 00:05:57,110
So in order to fix this we need to use one of those three strategies that we had previous previously

86
00:05:57,110 --> 00:05:58,080
discussed.

87
00:05:58,130 --> 00:06:04,160
We can set up a constructor function and bind on search them that we could set up on search submit as

88
00:06:04,160 --> 00:06:05,200
a ero function right.

89
00:06:05,200 --> 00:06:10,340
You're in line or we can wrap on search submit down here inside of an arrow function.

90
00:06:10,340 --> 00:06:12,850
Any of those three are going to work out just fine.

91
00:06:12,860 --> 00:06:14,140
Let's take a quick pause right here.

92
00:06:14,150 --> 00:06:15,260
We come back in the next section.

93
00:06:15,290 --> 00:06:18,880
We'll pick one of those three methods and implement it inside of our app component.