Rendering a Fetched Item in the Newsletter Detail Component
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

[00:00:00] Welcome back. And this time we're going to actually display the and we just fetched in last guy you see here in the committee. We first got him from our archive based on the A.D. with the action of the law. Yeah. So we can do this is vines that are saying these little detail. Well let's just leave that in there for now let's put it in and attack the newsletter in detail and then let's make a call here to a function to start rendering patched item and the Drive-Ins function. And the reason being this is cause we want to see if the object that exists yet before we render it so let's say render first item and then let's say if this stuff prompts stuff first item so it exists. We want to return them. So what we want to return in here is basically our content that you see in here. So we want an image we want a title and we want the bottom. We worry about this part later and everything else. For now we just want to get the functionality and all the components and then we'll get on to the details. So I'm going to go and in here I want to say OK we want a title and we want this to be a rich history. Let's actually get rid of this let's just straight up call this render finished item. Looks like a lot enclosed in a div anyway. Q That should be good. [00:01:43][102.4]
[00:01:44] Now again here let's just for turncoats we have an H3 and we want to display this props Fichte item DAAD title and we need the image we'll put the image above it for now and we can do that with an image tag. So this is very similar to what we did in the content it's actually just copying. So to head over here with snatch this is Dave here and we'll be building this into its own component later on. Okay so same idea where we want to call this fat Shaitan we will save that. Let's head over to our browser and see where we got it. Let's click on the link and we have our item. So it looks like what we have here except for our fancy styling. We just need a box here which we will get into later on. If you really want to we can just we just do it now we'll put it in the separate boxes here with a GridLayout column Rokan way out bootstrap. So the first one going to be a box. We head over to our archive. We did the same thing or what was just the newsletter component. So we can just copy all this and then head back to our detail. And let's just replace everything and then let's get rid of this newsletter content and let's give it to the archive and let's just call this dot broker this dot rendered item. Okay so that should be all we have to do. Let's go ahead and go back to our app. It's good news. And what's cooking one of these. OK. Yeah that's what we want. Let's change the date just so it's a little more. [00:03:38][114.1]
[00:03:40] Well know basically all we know is that there are two different components and we're selecting our. We're specifically dealing with this one like we are on this page. OK. So that's it for this guide and the next guy. We will go a little bit over what we just talked about and how we got that accomplished and then we will also look into a way that we can fix this air that you get when you the safety of the app. So computer code and then get into that see Randy fetched and on the screen catching the next guy. [00:03:40][0.0]
[216.5]