[00:00:00] Hey welcome back. Now that we have the archived component here and we have our newsletter set up a little bit more in terms of the structure of the UI. Let's go ahead and throwing our archive into our archive compiling here and was down her items. So first thing I want to do is start off by getting rid of the list items and then creating a function up here that will return us a list item would say render input or vendor list item is equal to. Well let's let's call a render newsletter archive. Kind of long but it doesn't matter. Okay so the more descriptive the better we are. Render newsletter article I would say equal of function. And then let's have it taking a parameter of item or artist items or archive item and then that should be good. When that saved the turn and was put in inputting here. So let's say for a list and let's say in here we want to access our item data. So we checked. Over here we have our title and we have her body and we have her image or all but we don't need. This is the image you are on and in the future we're going to have a date object in here and most likely if you actually 100 percent like. If you're watching this course and you have this you're getting this response you're going to have a data object in here as well but just ignore it for now or give it a shot and see if you can add it in yourself. [00:01:34][94.1]
[00:01:35] Basically what we want to do is render out a list so we have the title and the date. So let's go ahead and say okay with returns and GSX and this function we want to list so a list items it's a list and then in here we want her title swing set item Duffe title and then we want to say item dot gate but I'm showing hardcore to and for now so I'm going to put the date like like that. That should be good. Now this needs to be like a paragraph tag or something. It doesn't absolutely have to be but we're going to do it that way. Okay so we have that and that should go in there so now we just need to get our archive and map over it so we could just throw all this into our archive here and direct we do it with three ducks. But I want to just throw it in through our process here. That way we only have to do our redux and here. And then we don't have to do five different components for the news. We only have to do it in one. For now at least. So prox. We want to say archives equal to this doc prof's archive and then we'll save that and was checking the browser sheep were still running and were still running but we don't have our items in here and that's because we haven't rendered anything on or archive. So let's go to our archive now and we have access to these props are archive which is state not news cluttered archive. I'm going to do that console on here and that's what this data is. [00:03:16][100.9]
[00:03:16] Now we have access to this data in our newsletter archive. So all we have to do is map Obreht and her list here and call Renouard newsletter. Each instance passing the item and then we'll render out right. So let's go ahead and say okay this prompts the archive and we want to put this in Brace's here and say this. Propst archive to map this path in an object what we need. We could call it item and then we want to the next. And the reason we want an index is so we can get them each unique key items in the list here so I'll show you what that is when we get that error. But in here we just want to say OK return and then we want to say render we want to say this render newsletter archive and then we just simply want to pass an item and that should give us what we want. Let's go and say let's see what we have here in the Bronx. Okay so we are has cannot read property map of undefined. So basically it doesn't know archive is worth anything because when we are initially rendering newsletter it doesn't have archived yet. So I think there's a couple of ways we can fix this in our newsletter component here. What's just type the talk you're static prompts is equal to an archive and then a blank object or a blank collection. This might fix it why not with a page here didn't fix it. Let's go ahead and delete that. Let's do it the other way. [00:04:53][96.7]
[00:04:53] I wanted to originally do it so we want to head over into our newsletter archive and we simply just want to say okay we only want to run this if we archive before is worth anything. Has anything in it. So let's just call a function that does this so we can use in its statements so we don't get messy with our. So let's say this the render list and what we might want with the world. Yeah sure. So it's the best render newsletter archive Deste. And then let's write this function right. Below are archived here so render newsletter archive list of function no parameters and then we just want your return call. First we want to say OK if this props archive then we want to do something. So basically we're just saying OK if we had anything to archive then we'll render our items here. So a piece that map function that we had below here both for you here and that's just based on Propst on our kind of map item index and then returning a call to this. So that should give us all of the list items we need. But this isn't going to work either because it's not going to return our list. It's going to return once. So basically there's nothing in here. We need to say we need to do something else we need to say okay let's make a list up here that we could save for item and sequel to an empty collection and then we get on the bottom here return items and then instead of returning it in this map we could simply say items that push wrapped around say that had back in the browser that should work. So you'll see that receiving her items here. [00:06:53][120.1]
[00:06:54] We have seasons of Thanksgiving and Happy Holidays. So that's great. Me every day I'm going to get go out and get rid of these these tactics here in the day just a little more accurate for now. And then another thing I want to do is try this. So instead of returning it array. Here are a collection. I was going to get rid of that and then I'm going to create a constructor or first interesting to say the top of here. I'm just going to say this that item is equal to an empty portion. Waltman to put it in constructors constructor. And I'm going to pass and cross to each of these. And I'm just going to say this thought items is equal to and then a blank array. OK. And now I'm just going to say here that this item that Bush will be pushing to the global items here and then right under this Carender newsletter archive list we can simply just say this Dymes and then we could also get rid of this call here and then want to call this delay so let's call it at the top of rendered with just saying this that I'm not going to display anything because this function is not running. So we should call it of our return and we should be good. We love the page and we have our content. Now the next thing I notice is it says each child in an array or iterators of Iniki Prok. By this point you should know how to fix this. So go ahead and try it. [00:08:41][106.6]
[00:08:41] If you can't just watch along as I do it so the way I'm going to fix it is in our list here I'm going we're going to want to say he does equal to a unique and unique object. So they all have their own unique and unique he can be index map here. So the way we can get indexing to here is by just passing it again as a parameter to type it out and then type in here and then in our in our call to this our regular newsletter archive item we can just throw an index right there that should work. Let's check it out in the browser. We shouldn't have that error anymore. OK. As you can see the error is gone way and we have our list and everything is looking good. Let's just apply some quick styles to get rid of these dots here because that might throw us off a bit. So tell them where to are made us and let's just say well I would say margin zero padding zero. Let's go back to our out here and we should those dots should be gone. Ok sweet. Let's go ahead and make it say archive above it. So we have a little more understanding of what peace goes where's. We know what's going on here. So it's good news Leonard ija us and let's say right here with put the giving again. Let's go back to our archive and just type in there. [00:10:06][85.2]
[00:10:08] So in our archive here instead of saying this dot items right here what we what we can do is say 12 what we can do is put it all into debt so we can copy this entire thing throw it into debt. So we have a list of our period. And then we can just throw another division here that says archive for now so we say that and go back and says archive and we have our list. OK. So that should be good. We'll leave it at that for this guy so we can take a breather. And in the next guy we will start. We'll develop the skeleton or scaffolding will set up our basic component for the content here and then we'll be putting in the very first or the latest fetch Newsletter Item so catchy not guy will do that first with computer code. It's a good start it's got get commit and let's just say rendering archive list items. All right. Catching the next guy will get onto that next component. [00:10:08][0.0]
[603.7]