[00:00:00] Hi welcome back to the reactor building and the last time we implemented some basic styles so we could get a general idea of what we want the UI to look like so we could continue back on with the react functionality without getting too confused about why certain pieces of text or images are in certain places so those styles are giving us a basic idea of what our layout looks like. So we don't get confused. So this guy we're going to be implementing this component you see here the biggest one on the screen. It contains an image some text and a bottle. These are properties of the first the first Newsletter Item on our request that we make our server when we are fetching our newsletters. So we get back all the newsletters and then we need to take the first item in the response and throw it into this component and then we actually need to cut off that first item from our archive because we don't want to display the New Year's resolutions one here in the archives as well. And when you're doing this it's going to be different data. It's not going be New Year's resolutions and it's like we're going to be slightly different than the date I'm dealing with since this is a server that is constantly being modified by other people taking this course. So let's go ahead and get started by getting this first item into a component. And we first need to create that components so back in our code let's create and you file a newsletter or newsletter components directory and let's say newsletter content digests let's proceed to enter in the boilerplate. [00:01:32][91.0]
[00:01:32] Here the scaffolding kind of of our component here lets say import React component from react and then let's say class newsletter's content extends Component. We then want to say rendered and return added here. All right now let's export it export default newsletter content. Now in here we will go back to our newsletter digest. We want to put it in here so cut out this page. Make sure you'd cut it using command X if you're on a Mac or control XP a nose. Now because we're going to place it in here and or lose our content save that going a newsletter and we want to use this component here. So you just begin typing in Visual Studio code. The component newsletter content. It will allow you to automate it. If you don't have that option just go ahead and write out the import up here. Import content from doubtful content. I want to separate these. We should have access to our compiler. Now if you save this you go back to this component and you head to the browser. We should see the same exact content. Main content. The latest newsletter. Now what we want to do is get this first item and throw it into this content component here. So let's go ahead and do that now by first looking at our component and saying okay what do we need. We need an image. We need a div here and we need a bottom. Okay so in our code it's kind of right that out. [00:03:07][95.0]
[00:03:09] Let's just call this the let's get rid of this content or let's use this as the body so let's make a diff here and then we want an image and we want a title which we will put in like an H2 type for now and then we want a body here. So it's just preparedness and thought in here. That can be a body for now. We're going to replace that in a second anyway and here. So that's what we got so far. Now let's go ahead and let's get our actual content in there once and for all. So let's head over to our newsletter reduce or digest and instead of making a whole separate request to the server we need to just take a piece off of archives so we can use it. So let's name this piece of state. Latest item on the day actual payload. Add in brackets. Put a Zero that will grab the first item off of the array off of the Coluche but step back for newsletter and use it in our news report here. Put this on a new line on the new line as well. And they're going to put a comma after archive. I'm now going to say newsletter or I'm going to say latest item and I'm going as a state newsletter. Don't leave the site. Now let's make sure we're actually getting this data in. And let's just console logging her Mounsey proxies so console the mod state newsletter dot latest. Let's go back for a browser and refresh it and see what we get. All right so you can see right here it's logging our data just the way we want it. We have our ID for Mongo. [00:04:57][107.9]
[00:04:58] We have our title or body image or so we were getting that feed into our component and display. So in our newsletter content that's Passan a piece of with passing a prop and let's say latest item is equal. This stuff prompts the latest now in our in our content here we don't want to immediately just access it because the first time around this component renders it's not actually going to be immediately available wisely. Anyway let's go back to our map here. Got distracted there and let's say let's go to our newsletter content and let's access the site. We don't want to direct. We don't want to immediately splay because we're not going to have. It's not really worth anything initially because it's not in our proxy right now so we want to do a similar. We want to take a similar approach to what we did in the archive component. We want to check if it exists before we before we render it. So let's go ahead and let's head over to our component here. The news content and that's right at a function called let's just call it render item and then let's just say if this thought process the latest item and the Lynsay return just copy this or throw it in here in a death all right. So this is going to be our content. We have our image or title Rameen content but saying this and let's call it have that in brackets. I wasn't sure it's working. So we should just get this data again. OK now let's throw in this data. So pretty simple stuff. [00:06:53][114.8]
[00:06:53] All we have to do is say for Image Source is equal to this props the latest item image or Yelp and check if that's working. Before we go on because it's not working we don't want to break anything else. So great. That's really awesome. It's displaying in the content just the way you want it. OK now get in the title and the bottom. Let's go back to our app here. And for Tidal let's say this props that title the latest item about title and then for the content let's say this stuff prof's the latest item but let's save that. Let's head to our out and see what we're getting. Oh yes we were getting are our latest newsletter item and it's displaying here and we still have our archive so that's pretty great. In the next guy let's get rid of this first item in the archive because we don't want to actually display that in here in here. It's a it's happy holidays just like mine. But they're also displaying the one on top of this called New Year's resolutions. And we want to cut off the one we're displaying. So let's go ahead and learn how to get rid of that and the next guy in Quittner code and the turtle here let's say implemented news wonder content component and I'll catch him next get. [00:06:53][0.0]
[408.8]