React Lyric Search App (Context API)

[Music] this video is sponsored by dev Mountain if you're interested in learning web development iOS or UX design dev

Mountain is a 12-week design and development boot camp intended to get you a full-time position in the industry to learn more visit dev mountain comm or click the link in the description below

what's going on guys so in this video series we're gonna be building a react app location that finds lyrics for songs okay so we can search for a song we can get the the lyrics and we're able to do

this because we're using the musiXmatch api okay this is the developer site for musiXmatch and as far as the the api goes it's free for two thousand a p i calls per day if

you want more than that you're gonna have to pay and if you want access to all of the lyrics you also have to pay so with the free plan you get access to 30 percent of the lyrics so basically

it's like it's it's for development testing learning stuff like that and then that's all we're doing here we're not building a production level app that we're selling or anything like that so

that's that's fine so you will have to sign up at developer.com and if you just hit get started for the free plan and go to applications you'll get your api key and you need this when you make requests

to the API alright so let's give it a shot now this is the search form on the landing page we have the top 10 tracks ok so just basically like ten of the more popular

songs that are out right now and then it has the artist the track name the album name if we click view lyrics it'll take us to a lyrics page ok we're using react router and we get like it says 30% of

the lyrics if you want all of them then you have to pay for for a plan all these third party data sources when you use them it costs them money because every time someone uses your app it hits their

their servers and uses their resources so naturally you're gonna have to pay so we have our lyrics we have the album ID the genre if it's explicit if it has any swears in it or any

thing release date we're gonna use react moment to format the date and if we want to search for a song like let's say the Unforgiven which is a Metallica song probably showing my age here and you'll

see that we get some results here okay so the Unforgiven I click few lyrics we can get the lyrics for that we also have a nice little spinner graphic alright so that's what we'll be building

guys let's go ahead and get into it all right so I have vias code open here and we're gonna generate our application using create react app now as far as state management what I'm going to do is

use the context API okay we're not going to use redux I think this is a good example of a smaller application where the context API is a nice solution I mean you could build it without without

even using that but you have to kind of pass pass along from the search you know when you when you do a search with the search component you have to get that data into the tracks component and it

just gets kind of tedious so I think it's a it's a good application to use the context API okay so I'm actually going to use npx to use create react app and if you don't know what MPX is it's

available with NPM five-plus I believe and it allows us to use create create react app and things like that tools like that without having to actually install them globally on our machine so

I can simply say npx create react app and I want to generate everything in this folder so I'm just gonna put a dot okay and I noticed it does take a little longer to generate when you use npx but

you don't have to install it on your system which is a plus and you always get the latest version okay okay so that should be done any second and just make sure that you sign up at

developer.android.com thing on port 3000 the original application so I'm just gonna say yes here and it's gonna run it on three thousand one I will just get the default react boilerplate here

now this isn't an intro to react if you don't know anything about react I would suggest watching you know my You Tube crash course or even better taking my udemy course react front to back

where we start from you know absolute scratch and we talked all about components and properties and state and all that stuff and we build a project so that is I'll put that in the

description with a link for just $9.99 alright so now that we have our server running let's clean stuff up a little bit I usually do a little bit of housecleaning with create react app we

don't need the logo here so let's delete that SVG we don't need index dot CSS we can delete that and it's gonna break by the way you can see the server's not running anymore well it's running but

it's it failed to compile and that's because we just deleted those files and some of these files are looking for those so index J s you want to delete this right here the import of index CSS

because we just we just deleted that file so obviously we don't want to import it app J s we're going to delete the import of the logo because we just deleted that and then for the render I

just want the the just the outer div and then I'm just gonna put an h1 in here and say hello and save alright so now our server is running correctly let's check our application we should just see

hello one other thing I like to do is go into the app CSS and just get rid of all that styling okay I keep the file but just get rid of the styling

and now he just look like this okay so we are going to use bootstrap and font awesome in this in this application so let's go to get bootstrap and get started and we're just going to get the

CSS we don't need the JavaScript for anything so we'll just grab the CSS here and let's go into our public index HTML and I'm just going to get rid of these comments so we'll get rid of those and

also change the title to this is called lyric finder just put a little slogan here we'll say fine lyrics for your favorite songs and we'll paste the bootstrap link right here and then we

just need to get the font awesome link so let's go to font awesome com we'll go to how to use and then grab the link right here close that up and paste that into the index file right there and we

should be good so we'll save that and close it up if we go back to our application the title has changed and you can also see that the bootstrap styling is in effect alright so what

we're gonna do first is just create the header or the navbar component cuz that's very simple there's no there's nothing to that really we'll add that will creat will install the react router

let me just show you kind of how this is structured okay so we have react router installed and all of this so the search the tracks this is all inside of an index component

okay and the index component is going to display on the the root route or the home route okay so we have the search component embedded inside the index and then we have tracks okay this whole

thing right here is the tracks component and then we're going to loop through the tracklist which is going to be in the state and then output each one of these tracks okay so the this is a track

component singular okay so we'll loop through will output the track component passing the properties from the state and then it'll display this stuff here okay and then when we click view lyrics

that actually goes to the lyrics component using react router okay so that's the plan let's see so yeah we'll go ahead and just create the simple navbar component

so in the source folder let's create a folder called components not a file I just created a file we want a folder we want it in the source Jesus okay so source components and then let's create

a file called actually know what I'm gonna do is I'm gonna put a folder instead in components called layout and that's where I want to put like things like the nav bar the spinner the index

things like that and then we'll have another folder that has like the tracks component the search the lyrics component anything to do with the API okay so in layout let's create a file

called navbar dot J s capital n all your component name should be uppercase now this is going to be a functional component and I'm actually using an extension here for vs code called es7

react Redux graph QL react native snippets and it has a bunch of helpful little snippets that you can use to do things like generate a class-based component or a functional component etc

so I'm going to use that and just do RFC tab and it'll give me a functional component okay which is just a function and arrow function and I'm gonna just take the export default

cut that out and just do a Const I'm gonna call this now bar equals the function and then just export it down here as navbar okay I think that looks better and I use semicolons you don't

have to if you don't want to it seems like it's becoming more popular to not use semicolons but I like them so it's it's your preference and I have prettier installed which

actually if I save it without a semicolon it'll put it there automatically ok prettier is another extension I would highly recommend 4 vs code so our nav bar is gonna be really

simple when we're going to return a nav tag okay and this nav let's put parentheses around this oops so this nav tag is also going to have some classes we're using reacts of

course we need to use class name and we're gonna say navbar let's do nav bar dark BG doc for the background to make it black and MB - 5 which is margin bottom 5 alright so

inside here we're gonna have a span with the class of nav bar - brand let's also do MB zero margin bottom zero and I want it to display as an h1 so I'm going to do h1 as a class and I also want to put

a class of MX - Auto which is margin auto on the left and right on the x-axis and this is just a bootstrap class this this will put it in the middle okay and we just want to say lyric finder okay so

we'll save that and that should be all set for that component now let's go to app J s and bring it in so say import no bar actually with this extension that I have installed we can do i MP tab and

it'll kind of setup the boilerplate for an import and then here we can just say we want to go dot slash component slash layout slash navbar alright and then we want to import navbar

okay and then I'm just gonna replace the h1 down here with navbar okay so that will display that component let's check it out and let's go to our version and there it

is okay so very very simple next thing we're going to do is start to set up the index component which holds all of this stuff because that's going to be connected to the the home route so we

might as well install the react router now so I'm just gonna stop the server real quick and just do an NPM install react - router - Dom which will install the version 4 of react router all right

so now that's installed let's go ahead and run the server again and say yes ok so now we have react router installed let's set that up in a PS so what I'll do is go up here and say import

next let's do I MP tab we want to bring this in from react router Dom and let's see we're gonna bring in a couple things so we're going to use some curly braces and we want to bring in browser router

but I'm gonna use an alias I'm gonna say as router okay and then we're also going to bring in route and we're gonna bring in switch okay and I'm not going to explain everything like how the router

works and all that this is more of just a project video or series like I said the react front to back course will we go over that stuff more in-depth all right so now that we've imported this

stuff we need browser router to wrap around everything okay but I used an alias of router so we can go down here and we can just say router and just surround everything within this return

so router okay and then what else do we want to do here I don't actually need this div like I don't need a div element in the Dom so instead I'm going to use a react

I mean still sake react fragment which is kind of just like a fake Dom element it's not going to show in the actual Dom whoops it's not create context I'm not doing that yet fragment alright so we

have our navbar now the navbar is gonna be on every page so that's not going to be like in any specific route we can keep it here everything that shows up under the navbar needs to be in a

container you see how like everything is pushed over in the middle if we don't use a container it's gonna spread all the way out to here and we don't want that so let's go ahead and put a

container class just a bootstrap class and then we're going to put in a switch to surround all of our routes alright so we'll do that and then to create whoops to create a route we just want to do

route and let's say exact we wanted to match our path exactly when the path is going to be a slash and then the component is going to be the index component which we haven't created yet

but we will in a second okay if I go ahead and save this we're gonna get an error because index is not defined so we will have to bring in index even though I haven't created it yet we'll just go

ahead and bring it in I'll copy this down I am gonna put it in the layout because it doesn't really have any functionality other than holding other components so it is basically part of

just the layout so we'll bring in index okay we'll still get an error because we haven't created the file yet so in layout let's create a file called index dot JSP I okay and index is going to be

a functional component so I'm going to do RFC tab and I'm just gonna cut that and say Const index equals like that alright now this is gonna hold our it's gonna hold our search component

and our tracks component okay but the search we're gonna do later first I just want to get the tracks to display those top 10 tracks that's that's the first goal so let's import tracks from and we

haven't created this yet but we will let's import tracks from let's see we want to go out of the layout folder into a folder called tracks which I'll create and then a component called tracks okay

and then we'll display that and here we don't need a div here so let's just use a react fragment okay and then in here we'll put in our tracks component which we haven't created just yet okay so for

the tracks component I'm gonna create a folder in components file so in components create a folder called tracks lowercase T and then this is where I'm going to put any any components that

have to do with the API like the search the lyrics the tracks the track component all that stuff will go in this folder so let's create a uppercase T tracks dot J s that's going to be our

tracks component and this is actually going to be a class-based component so I'm going to do our CC tab again if you don't have this extension just go ahead and copy this except I'm gonna get rid

of the export default and put it down here and just export the class name alright and for now we'll put an h1 in here and just say tracks just to make sure that it gets displayed okay so

let's go to our browser let's go to our app and there we go so we get our tracks displayed if I open up my chrome tools and go to the react extension or the react Chrome extension which you should

have installed and we look in the router see we have our navbar component and then we have our switch with our route okay so this is the index component right here and inside that we have our

tracks component alright good so now we have to start to think about state and we could put the the tracks the state inside the tracks component but I don't want to do that I want a global point of

reference a global state so that's why we're going to use the context API okay so we're gonna create in the let's see in the source folder we're going to create a file called context dot j s

okay so in the root context J s so the way that this works is we create what's called a provider and the provider is just like any other react component we're just gonna wrap everything in this

provider component okay so let's go ahead and we'll do an RCC tab which is just to create a class base component we're gonna call the class provider and we're not going to explore default we

are going to export this class but not as default okay because we're actually going to export a consumer from this as well and I'll talk about what that is in a second so let's see for the render we

want to return a contacts dot provider okay and actually one thing I forgot to do is create the context so up here what we have to do is create a variable called context and we're going to set

that to react dot create context okay and then we're putting this in the return the context provider and then the only thing that's going to go in here is an expression with this dot props dot

children okay because this is the provider is gonna wrap around every other component so that we can access whatever state we put in this provider will be able to access with you know

through all the other components as long as we use what's called a consumer okay so for our state let's go up here just like any other component we're just gonna add state you could use a

constructor but there's really no reason to here so our state is just going to have a lyrics underscore I'm sorry not lyrics it's gonna be a track underscore list which is going to be an array okay

so when we look at our final application this this is the tracklist okay so it's going to be ten tracks whether it's what we search for or the top ten tracks when we land on the page okay the idea is

once we search this should change into whatever the response gives us back that should change the state of the tracks okay so let's go back let's see so we've tracked lists before I do any kind of

request to the to the music's match and we get the response back let's just put in some dummy data to work with so just an object and the way that the data is formatted when it comes back from the

API is you'll have an object and then you'll have track which will be another object and let's just do track underscore name and we'll just say ABC then put this down so we're gonna delete

this after I'm just using this is just dummy data for now so that's our tracklist all right now this is in the provider state but we want to be able to access this from any component so in the

context provider we can provide a value and we can pass whatever you want into this I'm gonna pass the entire state okay now you could pass in this dot state tracklist if that's all you wanted

available but I want the entire state available in fact I'm gonna put a heading value in the state as well okay and this is gonna be a string and we're gonna say top 10 tracks okay now the

reason for the heading if we look at our application when we come it says top 10 tracks but once I do a search that should change to search results okay instead of top 10 tracks so that's going

to be part of the state that can change when we make a search all right so I think we're good here all we have to export the consumer so we're gonna say down here export let's say cons consumer

and we're gonna set this equal to we're gonna take the context and say dot consumer okay that should be a uppercase C so context dot consumer and then this is actually what we import into our

component to be able to access the state from the contacts so it's similar to connect with redux at least to me that's what I find when whenever you use your Redux and you want to use the global

state you know you you use you import connect and use that in your component to be able to map state to props and so on so it's kind of similar to that so I think that this looks good for now I

mean obviously we're gonna fetch the data from the API and that's what's gonna go on this track list but for now we'll just use this dummy data my my goal now is to go to our tracks

component and bring in that global state those tracks so to do that we actually have to import a consumer okay we want to import consumer from that context file which is let's see where are we

when track so dot dot slash dot dot slash context ok so we bring in the consumer and then to use that we actually have to return it down here so I'm going to get rid of this for now and

we're gonna say consumer okay so we want to return consumer and then in here what we do is put an expression and we put an arrow function with a value okay so we're gonna go like that now this value

is whatever we pass here okay so I happen to pass the entire state I could pass just you know whatever I want really but that's what's gonna be in this value and we'll have access to it

within this component okay so we don't have to pass things around even if this component was five levels deep you know we could still access it the same exact way from the context and that that's

really the beauty of of this context API so let's do just to show you let's do a console dot log of the value and then as we have to return something here to the to the to our interface so let's do

we'll just do an h1 just like we had that says tracks ok button but now we have access to the value from the context so let's save this let's go back to our application and let's go to our

console undefined weeks oh oh Jesus I forgot the most important part it has no idea what what anything is because in our app j/s we have to wrap everything here in the

provider okay just like you would with Redux usually with Redux you do provider and then you pass in your state we don't have to do that but we do have to do the provider so let's bring that in I can't

believe I forgot that so we'll say import provider from dot slash context okay because remember in context we exported the class of provider so that needs to wrap around

everything even the router so we want to put provider provider all right so let's save that export default imported as provider that's because provider needs to be in curly braces because it wasn't

this is it's not a default export alright so now let's go back to and there we go so now our value console logging our value we get our tracklist without with our to dummy Trax and we

also get the heading of top ten tracks so the whole state so we're accessing the entire state from the Trax component and we could do this from any component we want alright so let's go back now

instead of just having dummy data in our context and our state here let's make a request to the musiXmatch api and fill this with real data so to do that just like any other component we're going to

use component did mount which is a lifecycle method that's available with any react component class-based component because it comes from here and it just runs when the component mounts

now we're going to use Axios to make our request so we have to install that so i'm going to stop the server real quick and do an npm install Axios you could use the fetch API if you

want or something else just anything to make requests okay now start the server back up yes all right so let's see let's bring in Axios and then in component did now

first of all I'm going to just clear everything out of the tracklist just so it's an empty array like that and then in component did not we'll say Axios dot get okay that's going to give us a

promise back so we need a dot then and then if there's an error that will be in the dot catch okay so we'll say error console dot log error and in the dot then for now I'm just gonna also

console.log the result okay so whatever it gives us console dot log the result a dot data okay when you Zack Co so you want to use res dot data so the URL this is there's going to be quite a bit here

I'm going to put in some back ticks to use a template string and let's see let's go to the API so this is my API key right and you get this by going to plans get started on the free plan and

then applications now I'm gonna put this inside of what's called an environment variable or an environmental variable in react so I'm going to create a file in the root not in the source but in the

absolute root a file called dot env okay and here and here is where we can put basically variables that we can access from anywhere in our application now they have to start with react underscore

app and then you can do whatever you want I'm going to do mmm key and then I'm gonna just paste in my key and save it that way I can just access it wherever and whenever I want alright so

now that that's in there let's go back to our little Axio start get and the URL that we want if we go to the documentation so these are all the API methods and we're going to use quite if

few of these we're going to use this one here chart chart tracks dot get this will get the top songs in any given country so that's actually what we're using for the homepage for the landing

page you can see all the different parameters you can use we're going to use the US as a country you can set the page size we're going to use ten so we'll get ten songs or tracks gives you

an example of the response when we do a search we use right here track dot search that gives you all the different parameters you can search by certain genres and you could make a much more

extensive application if you wanted to and then for the lyrics we have tracked lyrics dot get okay I think that's all what we're going to be using track get I think we'll use that as well but let's

start off with the the top ten which is going to be chart dot track stock yet okay now in addition to this we need the core domain which is where is this C API methods right here so this is the core

domain its API musiXmatch WS / 1.1 so let's grab that first and put that in here alright then we want that track stock chart tracks get thing so let's go back there and grab this so we'll copy

that and let's put that right in here now I'm going to change the page size to 10 and I'm going to change the country to us okay now we have to add our API key to all of our requests so we're

going to do ampersand API key equals and then our API key now remember I put mine in an env file so to access it and to use a variable and a template string we use this syntax and we can

process dot e NV dot react underscore app underscore mm underscore key okay so that will that will get our API key and I think we have to reset the server after creating an environmental variable

so let's save this and then this should run as soon as the tracks component runs or as soon as the provider runs so I'm just gonna restart the server real quick so NPM start okay so it's making the

request but it's giving us this this no access control allow origin I'm sure you guys have seen this plenty of times it has to do with cores and in what they allow I'm not sure why why this API does

this and there's a few ways around it I'm going to I'm going to use a really easy way and use something called cores anywhere so if we go to HTTP cores - anywhere this is a little trick cores

anywhere dot Heroku app comm it's basically kind of like a proxy that we can just stick in front of the URL and it will work and it gives you some information here but let's grab this URL

so it scores - anywhere dot Heroku app and we're gonna just put this right in front of the URL here and the get request like that and now if I save and we go back to our application there we

go wait a minute that we don't go yep there it is so it just takes a second to fetch so what we'll do is we'll have a spinner and then when it fun when it it gets

back to us then we'll display the tracks but this is our response okay so if we look in message body track list there's ten tracks because remember we put ten in the query parameters and each track

gives us all this information okay this gives us like the artist name the album name the track name all that stuff the release date if it's explicit lyrics or not so pretty cool gives us a

lot of stuff genres so so that's good we're getting the requests now all we're doing now when we get the requests back or I'm sorry the response back is console logging it what we want to do is

set that to our state we want to take that response that tracklist and the response and fill our state with it which is this okay so I'm actually just gonna put some curly braces here so that

I can use more than one line so we're gonna put this on separate lines like that because I still want to log the data just to see what we're working with but then I also want to set the state so

we'll say this dot set state and we're gonna set tracklist yeah tracklist and we want to set it to res dot data now we don't want just res dot data because remember what that gives us it

gives us message and then body and then the tracklist so res dot data dot message dot body dot tracklist so that'll put the ten tracks in our state all right so what's let's let's actually

comment this console log out and save because in our tracks component or console logging the value and I want to see I want to show you what we get from that so I'm just going to reload okay so

when we look at what we're getting here we get this happens twice okay and if you views react before and you've dealt with with making requests to up to outside api's you probably know about

this but basically a first it's going to just render the tracklist as the initial blank array that we set and then when the data comes back it's filled okay so we have to account

for this basically in our component we have to have a conditional checking to see if this is here and if it's if it's full if it's not full as it is here when we get the response back we want to show

a spinner graphic a spinner component as soon as it comes in then we want to show the tracks okay so we have to account for that so in our tracks actually let's create our spinner

component so in layout I'm going to create a file called spinner dot j/s and if you've taken my react front-to-back course or my myrn stack front-to-back course I usually use the same spinner

component I'm actually going to just paste it in okay so I have a gift file which I'm going to grab in a second it's just a little rotating spinner and then we just have a functional component that

is an image and the source is going to be set to of course the gift the image file the alt we'll just do loading in case for some reason this the spinner doesn't show and then a little bit of

inline react styling setting the width the margin and the display to block okay so the margin will make it so that the spinner is right in the middle so let's save that and let me just grab that

that's spinner graphic real quick so let's see I know you guys can't see what I'm doing I'm just alright so this is the project folder and the spinner graphic is going to go right in the

components layout folder right next to the spinner component there it is and you can get this in the github repository in the description okay so now that we have our spinner component

let's bring that into tracks so we'll import spinner from and we're gonna go outside of tracks into layout and then spinner okay now down here we have to basically check for

we want to check two things we want to see if the tracks are there if it's if it's defined and if the array is empty or not okay if the array is empty which it will be on the first response or the

first log then we want to show the spinner okay so let's get rid of this and let's put an if if-else okay now I could do if value dot tracklist I could do that but I'm actually going to use D

structuring so that I don't have to put value dot in front of everything so the way that we do this is we just say Const use some curly braces and we want to pull out tracklist we want to pull pull

tracklist out of that value okay and then we only have to use tracklist like that okay so we want to save tracklist is is equal to undefined or so double pipe character or track list dot length

which will give us the length of the array if that is equal to zero then we want to show the spinner right because there's no tracks to show so let's do a return spinner like that okay and then

else for now I'm just going to return whatever an h1 and we'll just say Trax loaded okay so let's try that out we'll go back okay so now when I reload before it fetches or before it gets the the

response back from the API it's going to show the spinner once it comes in then it'll show the tracks loaded okay obviously we don't want to just show tracks loaded what we want to show is

this right here okay so what do I want to do now we need to loop through the tracks that we get back the array and then output a single track component all right so let's do that let's create our

track component so inside components tracks we'll create a file called upper case T track J s ok and this track component is actually going to be a functional component because we it

doesn't need its own state we just pass in the tracks as a prop okay so we do have to add props right here like that alright and I'm just gonna move the this down so I'm gonna say Const track equals

and then down here explore default track okay so let's see we want to actually in the tracks component we're gonna return [Music] let's put some parentheses here and we

want to put a div with the class of row because what we're doing is using the bootstrap grid to have two six column divs so we have two tracks against each other as you can see right here so six

column divs six column div and they need to be inside of a row okay so let's see yeah so tracks if class row do I wanna oh you know what I want to have the h3 that says the top

10 tracks and I want that above the row so what we'll do is wrap this in a react fragment like that and then let's put an h3 here and I'm gonna just going to give this a class name of Tech Center and

then I also want to move things down a bit so mv4 and then what's gonna go here is the heading that's in the state okay now that's going to be in this value so I can pull that out as well

by going like that and then just simply putting in heading okay and then inside this row is where we want to basically loop through or map through our tracks that come from the state so basically

this track list we want to map through and output a track component so let's do that real quick so we'll put in an expression here and we're gonna say track underscore list and then we want

to map through these okay so we're going to map through this list and I'm going to call each one item we're going to use an arrow here and then we want to render a track component for each one okay and

I need to import track up here so let's see I'll copy that down and this is going to be in track slash track okay so what's going on is we're looping through the track lists and for each one

we want to output a track now this track component needs to know what to display it needs to know like the album the artists name the track name stuff like that that's all going to come from this

item right here okay now remember each object in this array has track and then another object so we want to say track equals item dot track okay now if we leave it like this it's going to

complain it doesn't have a key whenever you map through a list you need to have a unique key so for our key we're just going to use the item dot track and then there's something called a track

underscore ID okay so save that and then let's go back to track J yes because right now we have nothing to display so we're gonna add this stuff now so so in props since we passed in right here

track as a prop then we have access to props dot track now instead of having to use props dot track everywhere I'm going to just use destructuring I'm gonna pull out track the track property from props

okay and then down here let's see we're going to return a div with the class name of call - MD - six okay then we're going to do we're going to put everything in a card so a bootstrap card

so let's do a class of card and a class of margin-bottom four and the class of shadow - sm and then in here we need a class of card - body which gives the card all the

padding and stuff and inside the body we can put in an H five and we're gonna put the artist name here which we can get from track ups we need our curly braces so track dot artist

underscore name so let's try this out let's save it and let's go back to our application and there we go so we get our top ten tracks and each each object in the track list is we're looping

through and we're outputting a track component so each of these is a track component which right now we only have the artist name okay I'm gonna go back to the context and just make sure I

console.log the response just so we see what we're working with so I'm gonna uncomment that and go back and now we can see in our track list okay so we have all this this information so we

used what artist name right here that's what we're seeing here and then for the key we use track ID remember the unique key that's what we use for that alright so let's finish this up so we'll

go back to track J s let's go under our H five and let's put a paragraph with the class of card - text okay so this is just standard bootstrap card markup and we're gonna put a strong tag and we're

gonna say track but I want to put an icon right before it so I'm going to say i dot fa s so font awesome and then we're gonna use the fa - play icon so it should look like that okay and then

we'll put a colon after the strong and then we want the track name so we can get that with track dot track underscore name alright and then we want to do the artist I'm sorry not the artist the

album name we already have the artist so I'm going to copy this line here I'm gonna put in a line break and then paste it in change the icon to FA - compact - disk remember those and

then change this to album and then let's change you'll say track dot album name because that is available to us okay so then under the paragraph we want to have a button to go to the view

lyrics page which we haven't created yet but we will create the button now when you're using react router you don't want to use an a tag you want to use a link from react router so we have to import

link from react router Dom okay and then down here we can use a link tag which takes in a two attribute which is basically like an H ref except we're going to make this dynamic so we're

going to put in curly braces with backticks and we want to go to lyrics slash track slash and then we want to put in a variable because we want the track ID

which we can get with track dot track underscore ID okay and that's not going to go anywhere yet because we haven't created the route but we will a little later okay

and then within the link let's put an icon Chevron so I'm going to do FA s and then FA - Chevron - right and then next to that we're just gonna save you lyrics and this link we also want to add a

couple bootstrap classes too so we'll say class name BTN BTN - let's do dark and then let's do BTN block so that it goes all the way across save it my prettier extension kind of just

prettier things up and there we go so we have our top ten tracks we have our little icons it gives us the artist name the track name and the album name few lyrics it's not going to show anything

because we haven't created that route or that component yet but this is working if I read we get our spinner once it gets the response sometimes it takes longer than

others the pencil depends on your network I don't know why that's taking so long that's weird why is that taking so long there's no way I hit to my mm cap there we go

all right so huh oh well so it takes a little bit but it's weird cuz like yesterday it was it was very fast so I guess it just depends on your connection and time of day and stuff like that but

I think that's gonna be it for this video guys in the next video we're gonna start to create the search ok the search component and we're going to basically create in our state we're gonna have a

dispatch function to be able to manipulate our state from other components because when we search we want this tracklist to completely change we want to make a new request to the API

get it back and then and then change the tracks so that's what we're gonna do next alright thanks for watching guys and if you like this video if you like this series please leave a like and I

will see you next time