Material UI Tutorial #14 - Lists & List Items

all right then gang so now we have this side draw in place what i'd like to do is output a list of links now in our case there's only two links to output because we only have two pages but nevertheless it's still going to be a list and i want to take this opportunity to talk about list components in material ui so let's go to our code and the first thing i'm going to do at the top of the layout file is import a few list components so the first one is the list component this is like a wrapper for every list that we create if you think of this as being a bit like html it would be the ul tag or it would be the ol tag the thing that surrounds the list then we have the list item components and again if you think of this as being a bit like html it would be the li tag so this is the wrapper for each list item and then down here we have two components and these components are for content inside the list item so if we want to use an icon inside the list item would use the list item icon component if we want to output text we'd use the list item text component all right so let's give this a little bit of a whirl just to create some kind of dummy list first of all then we'll create a list for our links so the first thing we need is the list component to surround everything and then a list item for each item so inside the list item say i want to output some text well i can say list item text like so and it could be self closing because we don't have to put the content in between opening and closing tags instead we can say here the primary text is going to be equal to something so for example hello so if i copy this and paste it down here i'm going to save that and preview we can see two list items if i add more there's obviously going to be more list items all right so that's basically how to create a list but what i want to do is create a list of links so let's work on that now instead of hard coding a list right here and a list item for each link that we're going to have instead what i'd like to do is create a bit of data not state just a normal constant which is going to store our list items and these list items are basically going to be an array so i'll call it menu items and this array will hold the different menu items we ultimately want to see in the sidebar over here now the reason i'm doing it this way is twofold first of all we're not bloating our template down here with hard-coded stuff we're just going to cycle through this list using a map method and it just makes it a little leaner down here and secondly if you have more menu items in the future i think it's easier to add them this way just adding them to this array because we're just cycling through that array down here later alright so each list item is going to be represented by an object and each object will have a text property that's the text we want to see for the link so i'm going to say my notes for the first one it's also going to have an icon property each one and that's the icon we want to show to the left of each link so in this case i want an icon called subject outlined like so i'm going to click on that and it's going to auto import it here for me and also i want to give this a color of secondary so that should be the purplish color all right so we also need a path property oops let's go to the next line path and this is basically the routes and in this case it's just going to be forward slash because if we go to forward slash we get this notes component all right so that's the first one i then want to duplicate this and add it in right here so the second link the text for that is going to be create notes and the icon that i'm going to use is going to be add circle outline and it's this one right here outlined it should auto import that for me at the top yep all right and the color is still secondary this time the path is going to be forward slash create okay so there's our menu items now we just need to cycle through these down here all right then so first of all let me do a little comment right here and this comment is gonna say list hyphen links just so we know what content is below this all right and then i'm gonna do a list component first of all remember that wraps our list items now i want to map through our data and output a list item for each one so we're going to use the map method on the menu items so menuitems.map and then we're taking each item as we iterate this and we return a bit of template for each one now we need to return a list item for each one and that's going to have a key prop so let me add this key prop on the key is going to be equal to the item dot text because the text is unique in each one if it was the same then we couldn't do this all right then so inside the list item i want two things i want an icon first of all which is going to be the icon specified here in each object so let's add that in so we use the list item icon component for this and then inside this all we have to do is output item dot icon and that remember is the icon component right here okay so we're outputting that right here the next thing i want is the text so we'll do list item text and we need the primary prop on this because it's going to be the primary text we'll set that equal to the item dot text all right so let's just give this a quick preview to see what it looks like over here and we don't actually see anything yet let me refresh nope so ah we need to save the file so once we've saved it now we can see this list of items so we have this nice icon on the left it styles all this for us and we have my notes and create notes as well so then first of all i want to add another prop to the list item right here and that prop is going to be the button prop now the reason i've done this is so when we hover over these it looks like we can click them so it styles it that way obviously at the minute as we click them nothing is happening but what i'd like to do is redirect the user to the pages that they click on so how we're going to do that well we can add in an on click event handler so i'm going to do that and i'm going to set it equal to a function which is going to fire now inside this function i want to redirect the user and to do that we're going to use a built-in hook and react called use history so let me scroll up to the top i'm going to say const history is equal to use history like so i'm going to enter onto that to auto import it up here and then we can use a method on this history constant now to redirect the user and that method is the push method and all we do is pass in a route that we want to push to and remember that route is stored on the path property of the item so i can just say here item dot path and if i save this now and try this out i'm going to click on create and we see this form if i click on my notes we see the notes again awesome so this is all working now there's one more thing i want to do and that is to create some kind of active class so that if we're on this page right here this is somehow highlighted or styled differently to show us that we're on this page and if we're on this page this one is styled a bit differently so how are we going to do that well the first thing i'm going to do is create an active class in our styles up here so let me do this active and all we're going to do is give this a different background color and it's going to be f4 f4 f4 so a very light gray so this is basically going to be the class of any link that's active so if i'm on the my notes page it's going to have that very light gray color in the background and likewise for this one so how do we dynamically apply this to one of the list items if we're currently on that page well we need a way to find out if we're on that page and to do that we can use another hook and this is called the use location hook built into react so i'm going to say cons location is equal to use location like so press enter to auto import that and it comes from let's have a look where is it use location right here from react router dom okay so now we can use this to determine what page we're on and dynamically output a class name to the list item so let me do this i'll do this at the bottom down here we'll say class name is equal to something now then we need to check is the location path name equal to the path provided by the path object so what i can say is okay take the location which we get remember by using the use location hook then dot path name so this is basically the route that we're currently on and i want to see is that equal to the current item we're iterating right here dot path now then if this evaluates to true we're going to use this question mark here because we're using a ternary operator if it evaluates to true then we're going to output the value on the left side over here which is going to be classes dot active now we do a colon and if it's false we're going to output this other value which is going to be null so this basically says evaluate this if it's true then we're currently on that page and so it has the active class if it's false then we don't give it the active class it's just null so if i save this now and preview over here we can see since we're on the home page it gets this background color if we go to create it gets that background color so now we know which page we're on even if it's already extremely obvious because of the content so that is the list done for the draw next i want to return to this function up here make styles and talk a little bit more about that

Channel: The Net Ninja

Views: 25,932

Keywords: react, material ui, react tutorial, material ui tutorial, react material ui, react material, material ui crash course, tutorial, crash course, react bootstrap, material ui project build, materialui, materialui tutorial, react materialui

Id: CNh3Q_z9GSw

Length: 10min 9sec (609 seconds)

Published: Mon Mar 29 2021