Full React Tutorial #10 - Outputting Lists

Key Takeaways

all right then gang so ultimately what we're doing here is building a mini simple blog so ideally we're going to need to have a list of blogs to output in the template so i'm going to create some state to represent these blocks and to do that we're going to use the use state hook to create the data since the data might change at some point in time we might delete a block and we need react to update the dom when that happens so what i'm going to do inside the home component which as you can see i've stripped pretty bad again we just have a div right here and an h2 and in fact we'll delete the h2 as well and at the top of the function i'm going to create some states so an array so we can destructure the two values we're going to call this blogs and we also need a function which i'm going to call set blocks and we set that equal to use state like so remember we need to import that at the top for this to work so the initial value of this state is going to be an array of blogs now i'm not going to write these out from scratch because that's going to take a long time and it would be quite boring for you so let me just paste them in it's essentially three objects each object represents a single blog and each one has a title property a body property and an author and also an id now the id is going to be used later by react when we output this list of data so each id needs to be unique for each one of these items all right so how do we output now this data in the template well if we think about it we need a bit of template for each item so we can show maybe the title and the author for each one or something like that now what we could do is hard code it down here in the template i could do three divs right one for each item but this is not beneficial for two reasons first of all it's time consuming and we're just repeating our code and secondly the data might change at some point we might have 10 blogs in the future and if we're hard coding that information then it's not going to be able to output the new blogs if we have some or if we delete some it's not going to delete them from here as well because we're hard coding each div so we don't want to do that instead what we want to do is figure out a way to cycle through this array using some kind of javascript in the template and output a bit of template for each one so then it doesn't matter if there's two items in the array or a hundred because it's going to cycle through them and for each one we have create a bit of template so how do we do this well the way we do this is by using the map method in javascript so remember the map method just cycles through an array and it can do something with each item in the array now what we want to do is return a bit of template for each item as we iterate through each one and then that template is going to be output to the browser so remember inside the template we can output javascript or we can write javascript and we do that inside curly braces so i can take the blogs property that we have access to right here and then use the map method on this and this fires a callback function for each item whereby each time around we want to return a bit of jsx template and that's going to go inside parentheses so for each iteration as we cycle through these we get access to the item we're currently iterating and i'm going to call that blog but you can call it what you want so on this item each time we cycle through this array we get access to the title property the body the author and the id so what do i want to output for each blog well first of all a div with a class of blog hyphen preview so this is a blog preview that's going to be output on the home page for each blog and it will display maybe the title and the author but not the body if we want to see the body maybe we click on the blog preview and it takes us to a different page later on but for now let's just output the blog preview now that when we output a list like this using the map method each root element in the template that we return must have a key property now this key property is something that react uses to keep track of each item in the dom as it outputs it so if data changes at any point if we remove or add new items to the array react can keep track of those items so you always need to add a key attribute to each item that we output otherwise react cannot distinguish between list items in the dom so this is normally an id property for each item in the array and we have the id property right here so let's use that and by the way this must be unique so if this was one as well it wouldn't work because the id is not unique right so it must be unique for each item so i'm gonna put blog dot id right here blog because we have access to each item and then the id property from that blog okay all right then so inside this all i want to do is an h2 first of all which is going to output the blog title inside curly braces and then below that i'm going to do a paragraph tag and i'll say written by and then i want the author so blog dot author like so all right then so if we save this now hopefully we're gonna see in the browser yep it cycles through each item and outputs the title and the author for each one so that's how we output lists of data in react we have the list right here and we store that in use state and then we map through that data and we take each item into that as we map through it and we output a bit of template for each one and for each one it has a key property which is the id in our case but it can be any unique property now finally i just want to add some css for these things right here so it looks a bit better and it doesn't look like this so let me go to the index.css and i'm just going to paste in these rules there's only three and first of all we target blog preview which is this div right here and we say give that a bit of padding and margin and a border bottom which is this faint gray color then when we hover over it give it a box shadow so it comes out with the screen a little bit and then the h2 the title inside it a font size of 20 pixels a color of this ready pink and a margin bottom of 8 pixels so very very simple styles but if we check this out now it's going to look a little bit better okay