Let's add in a new piece of state to our application, though, in the search component.
I'm going to initialize a new piece of state at the very top.
I'm going to call this new piece of state results because it is the results of my search operation.
We'll get results and set results.
We then need to think of a default value for this piece of states.
It is eventually going to be an array of objects.
I think that when we first render our component to the screen, it would make sense to use a default
value here of an empty array.
Just to say we do not have any search results right now.
Then inside this search function, we're going to take the data out of the response we get.
We have concerns, data is the request.
And then right after we make the request.
Make sure that you're putting this still inside of this search async function.
We're going to use data to update our results.
Piece of state.
So we will put in set results.
And provide data.
That will cause our component to automatically re render.
So we can then access the results array down inside of our J as X block and render out our list.
Right now, let's just do a console log of results and make sure that we're getting the correct data.
All right, back over here.
Well, it looks like this first request did not quite go as expected.
If I go to my console, you'll notice I get an empty array one time slots from when our component first
renders.
And then on this next console log, we get back in air and it says, as our search parameter must be
set.
Why is that?
Well, when our component is rendered for the very first time, term is an empty string.
If we provide an empty string to the Wikipedia API, they are saying, hey, you have to provide us
and s our search.
You can't search for empty string.
We have two options available to us.
We can either put in a default search term that will be displayed to the user.
For example, we could put in programming.
Right here.
If we do that, then when our components first rendered, we will initiate a search and we will search
for the term programming, that is option number one.
Let's try to see this and then see what happens.
You'll notice now that we've got an initial value of our state of programming and that shows up inside
of our inputs.
And then we could see the response data.
Right here, we can expand query.
And those are some computer programming articles.
If we do not want to provide an initial value for our user, but we don't want to the request to air
out or like that, we could revert you state right here and give it an empty string as the default value.
And then inside of use effect.
When we call search right here, rather than immediately calling search, we can make sure.
That term is defined.
But now, if term is an empty string.
For me, a term it will, if term it is an empty string, will not search if term has some characters
inside of it.
We will do a search though, if we take this approach.
We will not have a default search term and we will not make an initial request until the user starts
to type something in like so.
So it's really up to you.
In my case, I think I will provide a default search term so the user can see some content on the screen
the instant they come and look at this component.
So I can remove that statement.
But leave behind the search.
Call.
And I will change my default state right here to programming.
I can say that one more time.
Look back over and take a look at the results.
You'll notice that results right now.
I really just took all the data out of that response.
That's not super helpful because we don't really care about all of the properties inside of year like
batch complete and continue and search info and so on.
Do we really care about is the search array right here?
Maybe rather than taking the entire data property out of that response and using that to update our
results piece of state, maybe we should kind of crawl through there and just get this search array
of results.
And set that on our state instead.
Before that, when we sat results with data, we could change it to data dot the data.
Is this entire object to be data?
Dot query.
Dot search.
Get let's save that again.
And now we can see that during our initial render, we have no results.
The request is then completed.
We update our states.
We do a console log of the results piece of state, and we can see that we've got the array of objects.
All right.
What's the.
It's looks pretty good.
Then the last thing I'll do is remove that console log.
And then finally, we need to map over that results, Ray, and build out our actual list of elements
to display inside this giant x block.
Let's take care of that list building in the next video.