Full Stack React & LoopBack

Full Stack React & LoopBack [3] – Fetching & Displaying Meetups

hey guys welcome back in the last video we went ahead and we did quite a bit we set up our react application inside of our client source folder we set up the

router the version 4 router which is a little complicated we also created a few components our main component which has the router all the routes in it the navbar component the meet-ups component

and the about component alright now one thing I forgot to do is add the about to the sidebar here I wanted to put that link so let's do that real quick we're gonna go to let's see navbar j/s and go

down to where we have our side nav and let's copy one of these lis here and paste that in and this is gonna be about it's gonna go to slash about and for the icon here we'll do let's see let's do

question I think it's questions circle let's try that yeah there we go so now we have our about page alright good so now we're going to do is open up our meetups component because we want to

fetch the meetups from the backend now we're gonna need some kind of HTTP client to do this space set out and we're going to use something called Axios which is a really nice lightweight

HTTP client to make get requests post requests put patch delete all that stuff so we're going to need to install that so I'm gonna go down here into the terminal stop the server for a second

and do NPM install xeo stash – save ok and while that's going on we'll just go ahead and bring it in up here all right yeah we'll start the server back up with NPM start it's gonna open a

new tab okay now when we get the meetups we want to store them in state so that we can access it throughout our component we're also gonna have a meetup item component which will represent each

individual meetup that's listed here and then we'll pass the state or I'll pass we're gonna loop through the the meetups in the state and then pass them in as a property into those components but we'll

worry about that later for now what we're going to do is create a constructor so we're going to go up to the top of the class here and say constructor okay so we have to call this

super method here because we're extending a component and we need we want to call that components constructor as well and that's what we do with super and then we're gonna set some state so

we'll say this dot state equals and all of this is just an object inside here we're gonna have a value or a key called meetups and we're gonna initially just set it to an empty array so the reason

I'm doing this is because in order to get our meetups we need to make a request using Axios we need to make a request to loop back to our back-end to this

get get route right here basically we want to mimic what we're doing right here in react so we're gonna set this blank at first and then we're going to create a function or a method called get

meetups okay and this is where we're going to use Axios so we're gonna take Axios and we're gonna say dot get because we're making a get request actually I don't want that semicolon and

then we want to put the route that we want to make the request to now remember with loopback we can go to we can make our request to localhost 3000 slash API slash meet-ups

that gives us all of our meetups so that's what we want to put inside of here all right now the way that Axios works is it returns a promise something called a promise and to get that we need

to use dot then okay so inside this dot then we're gonna pass in another set of actually we don't work we only have one parameter so we don't need the parentheses so we'll just say response

and then we're going to set that to an arrow function and inside here we should be able to get the response all right now if I go ahead and save this nothing's gonna happen you'll see if I

open my console we're not getting a response because all we've done is create this function it's not running in order to run it we need to put it inside of a lifecycle method all right so react

components have what's called a lifecycle method they're basically methods that fire off at certain points render is actually one of them and that's the one that's actually required

the one that we want to use is called component will mount alright and this actually fires off at a certain point when the component mounts and just to show you that just to prove that to you

let's say console.log one two three and save and now when the component renders you'll see we get one two three so this fires off automatically so what we want to do is we want to call this dot get

meetups and run it let's save and there we go now we're getting our response and this is what it gives us now the way that this promise works that's that's returned from Axios is it puts the data

inside of this this data object right here and you can see if we look at zero that's the angular meetup one is the reality react meetup so instead of using just response we want to use your spots

dot data so if we run that again now you'll see we just get the odd the array all right now what we want to do is take this response data this array of objects and put it inside of the meetups inside

of the state so to do that we can say this not set state inside here we just want to put our object we want to say what part of the state do we want to update

and that's going to be the meetups and we want to set it to the response dot data okay and then this can actually take a callback function so I'm gonna put a comma here and then just put an

arrow or use an arrow function and then we can console dot log whoops and let's see what's in the state so we can save this dot state and what should happen is we should now see the meetups inside of

the state so let's save let's let it run and there we go now if we look here you'll see inside the the state object we have meetups with an array with our two

objects okay hopefully that makes sense I'm just going to comment the console log out because we don't need that but now that it's in the state we should be able to access it down here in the

render function now since this is an array what we need to do is we need a way to iterate through these meetups and then output them one by one so what we'll do is go above the return

inside the render but above the return and we're going to create a variable called meetup items okay and we're going to set this to this dot state dot meetups remember we can access the

meetups from here and we want to map we want to just basically map through them so we're going to use a method called map and then inside here we're going to put a set of parentheses and say meetup

comma and then an index or I and then outside of this first parentheses we're going to put an arrow set it to a set of parentheses and then in here we're going to put a return and let's return for

each one in Li and in here we can actually say I'm used to hang Euler so I put two but reactors reactors just one set of curly braces and we can access Meetup because we

that's what we put right here we could have put anything here and then we can access any property of the meetup so if we look at loopback we can access the name city address or ID so let's get the

name I'll say dot name okay now this alone if I were to save you'll see that nothing's happening it actually says meetup items is assigned but never used so what we want to do is

go down here into the actual return of the render and let's put in EUL and then put in the variable meetup items and save and there they are now we're gonna get this this message that says each

each child in the array should have a unique key property don't worry about that we're gonna get into that in just a bit but you can see that we're now getting the meetups all right now I want

this to look a little better materialized has something called a collection so you can make unordered lists look better by adding a couple classes so for the UL we're gonna add a

class name look at that I remembered a class name of collection and then the list items need to have a class of collection items alright we'll save that I'm sorry collection item singular and

there we go all right cool so now what we want to do is we want to make each one of these an actual component called meetup item instead of just rendering an Li like this so let's create a new

component over here new file and components called meetup item dot J okay and then let's see we're gonna use the same format clap meet extends component I guess I guess we'll just

type it out real quick so we'll say import react they also want component from react we're also going to want to bring in link from the router and then we want our class called meetup item

which will extends component make sure we export it alright and then here let's put in our render and we're gonna render and see return and what we want to return is this right

here so let's go ahead and copy that actually will cut it pay seven now this year I'm gonna get rid of this for now what we need to do when we when we embed this meetup item component here we need

to pass in the state we need to pass in the current meetup right here as a property because you can pass in properties to components so what we're gonna do is we're gonna bring in that

meetup item component look inside the meetups j/s by just importing meetup item and let's see yeah meetup item from dot slash meetup item and then down here where we had the li we're gonna use the

component meetup item alright now it's not going to know what item to display we need to pass it in as a property okay so what we'll do is we'll take we'll call it item we can call the property

whatever we want and we're going to just pass in meetup which comes from here okay same thing we were using in the LI we're going to just pass in the entire meetup now remember that message about

having a key with a unique value well that's where we're gonna what we're gonna add right here we're going to say key equals and we're going to set up to the unique value of the meetup ID so we

can say meet up dot because remember each meetup if we look at loopback each one has a unique ID so that's what we're passing in for the key all right so now we have access to this

item from within the meetup item components so let's go ahead and save this let's go back to meet up items right now it's gonna break because we're not

finished alright now that's getting passed in as a property what I want to do is take the property that meet up property and add it as state inside of the meet up item component alright so

what we'll do is put a constructor now when you're passing in properties to a component you have to add it here as props and then also call a super method just like we did in meetups except we

want to pass in props here as well and then we want to say this dot state equals and let's call this item now it was passed in as item as well right here so that's how we can access it and we

can say item I'm sorry props dot item all right so now down here we can access it as this dot state item because we added it as state up here so right here we'll put in

some curly braces and say this dot state dot item and we want the name so we'll say dot name and let's save it and hope it works and there we go so now each one of these is actually its own component

it's a meetup item component now right here you'll see link is defined but never use it's because we defined it here but we haven't used it what we're going to do with it is wrap it around or

we're not I'm not around but inside the li because we want each one of these to go to a details page for each each meetup so let's go down here and put in a link to okay let's put the ending tag

here and then where this is gonna go I'm actually gonna instead of using double quotes here we're going to use curly curly braces and I'm going to use a template string which is part of es6 so

a template string instead of using single quotes we can use backticks backtick is the key to the left of the number one and then in here we're gonna say slash meet-ups slash and then we

want the ID okay we want the ID of the Meetup now to put a variable inside of a template string you need to wrap it in money sign and then curly braces like that and then

we can put in this dot state dot item dot ID okay cuz that'll give us the ID so let's save it and now you'll see we have a link if I click it goes to meetups slash and then the actual ID of

the Meetup now we don't have anything displayed down here yet because what we need to do is create a meetup details component and then add that to the routes and we're gonna add it to a route

like this so that we get the details component alright so let's go ahead and do that now so I'm gonna go into components and create a new file called meetup details dot j/s okay and let's

just copy let's see I'm gonna copy what we have in meetup item cuz that's a pretty simple component we'll grab everything there we'll put it in the meetup details we are going to need

Axios in here so I'm going to import that because we need to make another request to get the single Meetup and we'll change the class name to meetup details for the for the constructor

we're going to need the props that's fine now for the state instead of having an item we're gonna have details which will be set to nothing at first alright and then in the render let's see

we're gonna get rid of the LI we don't want that for now let's just put a div okay we'll put a div and we'll just put an h1 and we'll just say details just for now all right and then make sure

that you explore it the right thing which should be meetup details and save all right so now we have this route this component now we need to create a route for it so let's go to our main Jas where

we have all of our routes and we're gonna add a new route and we'll say exact path equals okay and the path for this is going to be slash meet-ups slash colon ID all right and then we want to

set the component equal to meetup details and need to end that all right now meetup details has not been brought in yet so we need to go up here and say import meetup details from dot slash

meetup details all right so now if we save that we go back over here and we click on one of these it'll bring us to that details component which right now doesn't have anything in it except an h1

but the point is that it is working all right we should probably put a back button up here so we don't have to go back to like the menu here or click up here so let's do that real quick inside

the details so above the h1 let's put a button or not a button but a link say link to sit back and that'll be 2 / and then we'll give it a class name of BTN and

let's give it a name of gray I think we can do it like that alright GRE why sorry all right and let's just put a line break above it just to move it down well and in JSX you need to have your

closing slash like that alright so now we have a back button so now our goal is to get the single paid the single meet up and put that info inside here now for that we're going to use xeo so we're

going to make another request to API slash meet-ups and then slash the ID so if I grab this ID right here and we say slash you'll see it'll get the single meetup so that's what we want to do so

we're gonna it's the same idea as what we did in the meetups component we'll create a function we'll call it get meetup singular and let's copy what we have in the meetups component for Axios

which is this oh you know one thing we should do here is add on a catch in case there's any errors when you get a promise back when you use dot then you can also say dot catch and then pass in

error and then we'll just say console dot log error all right and then we'll copy this copy that and put that in details except we want to say right here instead of

making it to you know the all the meetups we want a specific one now I'm gonna use backticks here instead of quotes because I want to put in a variable okay it's gonna be meetup slash

and then the ID so the ID we can get from the parameters when you use the router and you have a parameter like we have here like we do this ID you can get it with inside this dot props dot match

dot params dot and then whatever this is in this case ID so just go back to details what I'll do is actually create a variable right here so we'll say let meet up ID equals this dot props dot

match.com dot ID and that should give us the ID from the URL and then we're just going to put it in here and remember with a template string or template literal or whatever you want to call

this if you want to use a variable you need to use this syntax so we'll put in here meetup ID okay we're gonna get our response let's uncomment the console log of the state now this is not going to be

called automatically we need to put this inside of component we'll mount just like we did before we'll say this dot gets meetup let's save it let it reload and down here you can see we have our oh

you know what this should be details because we're taking this details in the state and we're filling that so let's reload and now we have our details and if we look inside there we have the

actual meetup details which we should now be able to put inside of the render so let's go down here to the render and we're gonna put an H inside the h1 instead of just saying details we're

gonna put this dot state dot details dot name all right let's let it reload and now we have the name if we go to react meetup we get the name under that we're going to have a ul let's give it a class

name of collection and inside here let's put an li give that a class name of collection item and then this is going to be the city which we can get with this dot state dot details dot city and

then we'll do the same thing with the address alright let's test that out and there we go alright so now on the details page we also want to have an edit and delete

link I'm not going to get into that functionality in this video that's gonna be in the next one but I want to add the buttons so let's go under the UL and let's put in a link to link to and

that's gonna go to slash meet-ups slash edit slash and then the ID okay actually I wanted to use curly brace here with backticks alright and then in here we can put the variable and we can get the

ID with this dot state dot details dot ID okay and then here we'll say edit and let's give this link class name of BTN yeah just just BTN let's see what that looks like okay so there's our edit

button and then we're gonna have our delete let's see so the delete is actually gonna be not a link but a button because it's gonna be a button with an event that we're gonna call

inside of this component that's gonna delete it alright so let's go down here and let's say button we'll give it a class name of BTN and let's do BTN – no not BTN –

let's give it a class of red since it's a delete and let's also align it to the right okay and then over here we'll say delete and then what's gonna happen is it's

gonna we're gonna add an event here but I'm not gonna do that just yet so let's just save it I just want to get the button shown all right so now we have edit and delete so we're gonna stop here

now that we have all of our meetups getting fetched we have each one inside of a meetup item component if we click that it takes us to the meetup details component where we're fetching the

single the single meetup data the UI looks pretty good so in the next video we're gonna have this button go to an add form so that we can actually add meetups through our application we'll

make a post request using Axios and we'll go from there so thanks guys for watching please leave a like please subscribe if you're not and I will see you in the next one hey guys if you've

been watching my videos for a while and you really like what I do when I've helped you out a lot consider becoming a patron even for $1.00 per month that pushes me to keep bringing you guys the

best content I possibly can there's reward tiers for discounts for you to me courses personal support and more so check out the patreon link in the description below for more info

In this video we will fetch and display meetups from our backend LoopBack server. We will create the MeetupItem and MeetupDetails component

CODE: Full app code
https://github.com/bradtraversy/meetupz

BECOME A PATRON: Show support & get perks!
http://www.patreon.com/traversymedia

ONE TIME DONATIONS:
http://www.paypal.me/traversymedia

COURSES & MORE INFO:
http://www.traversymedia.com

FOLLOW TRAVERSY MEDIA:
http://www.facebook.com/traversymedia
Posts by traversymedia
http://www.instagram.com/traversymedia