Let's update this axios request right here.
I've got a dummy Eurail inside there right now.
I'm going to delete that and we will replace it with the actual your L to make our request.
So the oil that we need to make the request to is pretty much what you see right here.
You'll notice that the vast majority of this is actually a query string.
So we do not encode the query string into the actual Eurail argument of our request.
Instead, we're just going to put in the domain and the path and then we will provide a separate object
to encode all these query parameters.
Let me just show you what we need to do.
Going to first take the base.
You are El.
We'll find a wait.
Accio stock gets going to right inside there.
Each TDP s ohlin flash flash and then put in yen Wikipedia or W api BHB.
Then as the second argument, we're gonna put in an options object.
We're going to provide a Paramo property and assign it an object to remember whatever key value pairs
we put inside of this object right here.
Axios will take all those and code them into a query string independent onto the end of the URL automatically.
You and I need to take all of these key value pairs and write them into that parameter object.
Let's do that right now.
We are going to put in action is query.
List is search.
Origin is star.
Hoopes.
Or Matt, Jason.
And then finally, s r search.
And that's going to be our actual search term.
That's what we want to search Wikipedia for.
So in our case, it will be the term piece of state.
That is what we want to search for the four s our search.
We'll put in term.
All right.
That looks good.
We can now see this and do a quick test right away.
We're not going to see any results from this search up here on the screen.
But we can at least take a look at our network request log and make sure that we are making the request
successfully.
Gonna flip back over.
And then go to my network, AB inside my console.
I'm then going to filter by x h our requests.
And as soon as I do so, you'll see that an initial request has already been issued.
The reason for that is that when we first render our component to the screen, our use effect function
is going to be invoked.
Remember, that is one of the requirements or one of things that always happens with the use effect.
Even if we put on some array down here to customize when it gets invoked, no matter what we do, use
effect will always be invoked.
First time our component is rendered.
If we then start to type inside of our input, we're going to see an additional request made for every
single key press that I could put in p r o ram.
ING.
And you can see right away.
Yep.
We got an additional request every single time.
After I typed in the full word of programming and then going to click on the last request.
I'll take a look at the preview tab and then expand, query and search.
And there are all of our search results right there.
The query search is an array.
And then inside of each of these objects, we've got a title and a snippet.
Let's say that we are definitely making our requests successfully.
This looks pretty good.
Then the last thing we need to do is take the response, we get back, extract the data out of it,
and then assign that or use it to update some new piece of state inside of our component.
And remember, that is going to cause our component to re render.
We can then build a list out of that list of results.
Let's take you to that next piece of states.
In just a moment.