In the last section we added some code into our apt Yes file that will take the response and then log
out just our list of images that we get from the splash API.
So now we want to make sure that after we get the response we set it on our component state which will
cause our componentry to render and then we can print out.
Right now remember we just want to print out the number of images that were fetched.
So to add in state to my app component I need to first initialize my state at the top of this class
so appear all say state equals an object like so.
Now we have to decide on a property name for this state.
Well in this case we're fetching a list of images.
So I think it makes sense to say that we will have an image as property in our state object.
I also expect this image is property to eventually contain an array.
So as a default value I'm going to put a empty array in here in the past we defaulted properties in
our state object to be either a empty string or the value.
Whenever we expect a state property to eventually contain say an object or an array we usually initialize
that property to be a empty array or an empty object that allows us to call certain functions on this
state property right here without worrying about getting some like function not found or something like
that air.
In other words imagine if I assign a value of node to images and then later on inside of your I call
this state that images does map the map function is a function that is built into the array object in
Javascript.
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
map on an empty array no problem whatsoever.
So if we expect to have a property that's going to eventually be an array we default it to be an empty
array.
All right.
So this looks good.
I can remove that little map statement I had down there and now instead of the console log I'm going
to update my state with this set States and I'll put in here images is going to be a response data results
like so.
So now after making a request over to Splash we get the response we pull out the actual results or the
list of images.
We set it on our state object and that will cause our component to re render.
So then the very last thing we do is down here underneath the search bar.
I when I want to print out the number of images that we fetch.
So I'll say bounced this states images length images.
And here's another reason to default our images property to be an array.
If we had defaulted it to be null when we tried to access this statement images at length we would have
seen an error message and said cannot access property length of no.
So another good reason to default that to be an array.
OK so it looks good.
Let's save this and I'll flip back over to our browser and do a little test.
All right.
So back over here I see the default.
Right now we have zero images.
So it says found zero images.
So I'm going to enter in here.
All in due course again I'll hit enter and lo and behold what little error message do we have here.
Set state is not a function.
Hmm well I don't know about you but this error message seems awfully familiar.
It's complaining that some thing in here is not a function it doesn't look identical it's an identical
error message to one we saw before but it seems to be complaining that our value of this or some property
on this that we are trying to reference is not as it appears as a quick test.
I want to flip back over here and I want to add in a console log of this.
We're going to see if the value of this inside of this callback right here is what we expect it to be.
All right so I'll save that I'll do another search for cars.
And now over here in our log we'll see the console log and you'll notice that the value of this thinks
that it's something called on Samit.
If this was actually equal to the instance of our app component or the app class we would see some information
here that very clearly said this is an instance of the app class.
But in this case it says you know something else.
This is equal to some object that contains a property called on Samit.
So this is the exact same problem that we went over a couple videos ago.
We've got a callback function right here.
This is a callback function on search submit that we passed down to some child component that search
bar is then going to call that function at some point in time in the future.
And when the search bar calls that thing check it out over here here's the search bar.
We call this props on submit.
And a quick question to you what did we say the rule was for the value of this inside of some function
the value of this we find the function here is the function.
Here's where it gets called we look for the dot just to the left of it and then whatever is on the other
side of the door is the value of this inside the function.
So this not props are the prof's object that was passed to the search bar is going to be the value of
this inside of.
On submit.
Inside of this callback right here.
And that's what we just saw with that console log that right there at that object that is the props
object that we passed down to the search bar component just to make sure that's really clear.
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
in there like so I'm going to save this and rerun it.
So I'll put in another search term here and check that out.
Now you'll see.
Yep that sure is.
Our props object.
So like I said same issue we ran into before.
So in order to fix this we need to use one of those three strategies that we had previous previously
discussed.
We can set up a constructor function and bind on search them that we could set up on search submit as
a ero function right.
You're in line or we can wrap on search submit down here inside of an arrow function.
Any of those three are going to work out just fine.
Let's take a quick pause right here.
We come back in the next section.
We'll pick one of those three methods and implement it inside of our app component.