In the last video we got access to our I.D. inside of our results show screen.
So now we need to take this I.D. and use it to make a request to the Yelp API.
Let's first begin by getting a quick reminder of the route that we want to make our request to so back
over on the yelp documentation page.
Here's the route that we're going to use to make a request to get information about one single business.
So we're gonna make a request to businesses slash and adjust that I.D. they're sponsored we get back
this time around is not going to be an array of objects.
Instead it's gonna be one single object with information about the business that we asked for.
Remember inside this really big object there is a photos array so that's gonna be the array of images
that we want to display to our user.
So we need to once again make a request to the Yelp API let's first begin by adding in a little helper
function inside of results show screen.
I'm going to call this helper function something like get business or maybe better yet we could call
it something like get results.
Because remember we've kind of been using the term results in place of business or restaurant inside
this application so we're going to eventually call get results and we're just going to assume that we're
going to pass in the I.D. that we want to retrieve.
So I can add in an argument here of idea like so so then inside of here we're going to need to use that
Yelp instance or the Acciona instance I should say inside of our API Yelp dot J.S. file.
So I want to import that at the very top so we'll import yelp from up one directory API Yelp like so
so then inside of this function we'll do our request.
I can make sure I use the async await syntax so I'll say await Yelp dot get and we're going to make
a request to I can use back ticks right here.
Notice the tactics slash and then our I.D. like so because I'm using the awake keyword inside this function
I'm going to also mark the function as being a sync so now this is going to eventually give us a response
object.
And remember the data that we actually care about is on the response data property so we need to somehow
capture this data right here.
And once we get this data we need to re render our component and take the list of images inside of data
and show them on the screen.
Now once again I've used the term capture some data in re render the component.
Remember anytime we talk about rendering and component we're always talking about making use of state.
So we need to once again create a new state variable inside of this component that's going to hold onto
this response so we get back from the Yelp API so to make use of state I'm going to go back up to the
very top up here and from react I'm going to import you state.
Like so then at the top of my component I'll create a new piece of state that I'll call simply result
now previously and this last use of state that we had we had a default value of an empty array because
that meant that we were waiting to get some array of search results.
But this time around we're going to get just one single object by itself.
So we need to somehow provide a default state argument or state value right here when we call you state.
Usually whenever we expect to have an array of objects we'll have a default value of an empty array.
You know that definitely makes sense it means that we have not yet fetched any results and you suddenly
expect a state value to be an object.
Usually we will use a default value of null which indicates that we do not yet have any data available.
So in other words when results show screen first is rendered to our device the value of result is going
to be simply no which indicates we've not yet fetched any data then eventually after we make our request
we're going to update results.
And then it will be an actual object.
So at some point time when we try to get access to the data inside this result variable we're gonna
have to first make sure that result is not null.
Otherwise we tried to refer some different to some different properties on NULL which results in an
error okay.
So now we've got our piece of state set up we're going to take our response dot data and use it to update
our result piece of state.
So I'll say set result is response dot data
so now we've got this helper function that we need to call inside this component.
And remember we only want to call it exactly one time if we accidentally call it multiple times or if
we just call it willy nilly whenever this component gets rendered we're going to end up making a ton
of different API requests to you.
So in order to make this request we're going to use that use effect hook once again.
Remember that use effect is going to run a function exactly one time provided that we give a second
argument of an empty array.
So I went to import use effect at the top once again from react and then underneath get results I'll
call it use effect.
I'll pass in our aero function and then an empty array as the second argument then inside of here we
can call get results and pass them the I.D. that we retrieved from our navigation parameter.
Okay so this is looking pretty good.
So I think we're ready to do a quick test here.
I think maybe the last thing we have to do is try to pronounce some information that we get back inside
this result.
So I'm gonna add in just a console log underneath our I.D. and I'll put in a console log of results
like so I'll then save this flip back over I'll tap on one of the results and then hopefully we should
have a console log that describes that particular restaurant.
So I'll go back over to my terminal and back over here.
Here's my big console log and I can see right away that there's the photos array which means that we've
probably fetched some information about that very particular restaurant.
Awesome.
Okay.
So now we've got our data.
Let's take a quick pause and now we can figure out how to show this information on the screen in the
next video.