Well let's make sure that ain't tell me user taps on these items.
We take them to the track detail screen and then show the user some information about that particular
track.
So to do so inside of my tracklist screen I'm gonna add in an on press handler to touchable opacity
and then inside of here whenever user taps is saying we want to make sure that we navigate over to track
detail in along the way we want to make sure that we also pass along some information about what track
the user just tapped on.
So inside of here we're going to want to do some navigation to do some navigation we can either import
the navigation function from our navigation rep file right there or alternatively remember we've already
got a reference to the navigation prop coming into our tracklist screen we can use either one of them
to navigate around.
In this case since we've already got the prop luscious use that so inside this function I'm gonna give
myself just a little bit of space here by new lining that like so and then inside I'll do a navigation
dot navigate we want to go over to our track detail and remember if we ever want to pass along some
information we can put in an object as a second argument.
So in this case I'm going to communicate the idea of the item or the track that the user just tapped
on.
Remember that the idea's property inside of each these tracks is on the underscore I.D. property.
So I'm going to include the underscore here just to stay very consistent.
So I'll say underscore I.D. is item dot underscore I.D..
All right.
So we should be able to test that very quickly if I now go back over I should build to tap on say car
drive and go over to my track detail screen.
Very good.
Now we can go to our track detail screen.
Here it is right here and start to add in some code to take a look at the I.D. that was provided when
we navigated over here and also take a look inside of our context object and find the appropriate track
and then display some information about it on the screen to the user so to get started let's first try
to get a reference to the I.D. of the track that the user just tapped on.
So to do so remember we can get a reference to the navigation property and then to get some piece of
information that was passed along when we did our navigation we call underscore I.D. navigation dot
to get param.
And then the key of whatever that information was passed on.
So in our case underscore I.D. it's now we've got this variable that tells us exactly what element the
user just tapped on or what track they tapped on.
So now we can try to get a big list of all of our different tracks and find the appropriate track inside
their well if we want to get a list of all of our different tracks.
All we have to do is get access to our track context and pull the state out of it so inside of track
detail screen at the very top.
I'll make sure that I get use context from react.
I'll make sure that I get my context as track context from UPS up one directory context track context
there we go and then inside of my component.
Let's get our state so that's going to be our array of all the tracks we fetched from our API we'll
say use context location to submit track context like so
all right.
It's now that we've got our big list and the idea the one that we want to find well we can simply do
some kind of iteration through that list and find a particular track and we don't have to write a for
loop or anything like that.
Instead we can use that find helper function that we spoke about earlier inside this course.
So I'll say that I want to find the track by doing states dot find.
So remember staked find or specifically the find function tied to an array in Javascript is going to
take a function and we're going to receive every different track inside of here we're then going to
return a boolean the first somewhere you turn a boolean the entire find statement is going to end and
that element will be assigned to the track variable right there just to avoid some naming collisions
between track and track.
I'm going to name track inside of that arrow function as simply t like so.
So now the track that we care about is going to be t dot underscore I.D. with an I.D. equal to underscore
I.D..
So that should give us the track that we want to see.
All right.
So now inside of our text element rather than printing out track detail screen let's try printing out
the name of the track that we just found.
So I will do inside of here track dot name Gail let's test this out.
So I got a tap on car drive in as soon as I do I see a car drive appear perfect.
Same thing for went for bike ride and went for hike.
Well I would say that definitely works out.
So let's take a quick pause right here.
Now that we've got the track that we care about we can start to show a map to the user and draw the
track on there as well.
So quick pause and I'll see you in just a minute.