Detail Component for Newsletter
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

[00:00:01] Hi and welcome back to the reactor cores in this guy. We're going to set up our newsletter detail around. So you go to the design you will see that we have the ability to click on these arcane items and it brings us to a page that is called newsletter detail so that the admin they have the ability to edit it with the user they obviously can edit it but we'll get to that later. So what we need to do now is simply set up a route and display the data in here. So let's go ahead and create a newsletter detail component and create our route and then we'll go on to the next guy. So talk over your code here and let's head over to Arpita strapped Jansen that that route so we can copy this route and then what's this type of newsletter detail and actually put a slash after newsletter. And then after detail we want to put a colon and Heidi because we're going to have to pass the id of the newsletter and then filtered through our state or store that contains or archive items and get the correct one the correct newsletter to display. So let's go ahead and swap over here real quick and I'm going to show you this this design here. The site that we have newsletter list and the new newsletter Edet newsletter and newsletter detail. So we're getting out this functionality of the newsletter detail. So these are the routes we're going to be getting into the next 10 or so it's be at the top over here. And we have this right now. Now we want a different component. [00:01:40][98.2]
[00:01:40] We want newsletter detail and then we want to import that. So we haven't created this component yet import newsletter detail from such components newsletters newsletter underscored Kaitlin's cretinous component in our newsletter folder here newsletter detail digests and let's give it our basic reacts Kim K news letter detail extends Component Brender should be pretty used to this by now you've done it only couple million times. Now we're going to return indiv and just a newsletter detail and then at the bottom let's say export default newsletter Ito have a component. Let's go ahead and go back or bootstrap we have the here and now we just need a way to get to this to this route right now if we go to the browser. We have no way to get to it if we just hit enter. Nothing's going to happen probably manually go to it. We go to newsletter's slash detail were brought while were not brought to see why we have newsletter detail and then we need to provide ID. We have newsletters detail that say newsletters flash detail. Let's just put. So just random set of numbers. And it's not displaying well see lines we are newsletter we have around here we have a component. And the reason it's not displaying is because this one's also later. So whenever something comes after news here it's going to also read the newsletter because it's right here trying to render that to pull plus this round. So what it takes is we can copy it and put it down here that the less less complex route names down below. [00:03:42][122.3]
[00:03:43] And I thought that fix it should fix it didn't fix it but we're not displaying anything because we have we have an error here and the error is that we didn't find anything from render in our newsletter Telcel has this thrown in here and back to what I was talking about. So basically now we will only display that when we put an ID as well. OK so newsletter Deida. Now we need to have some way to navigate to this page without having to type it in here because that's you know obviously we need a get to click letter to get there. We want to click on these articles here. These these newsletter. OK so let's go ahead and end it there for this guide and then in the next time we will get into the wing attack and react right now and we'll put that in our newsletter archive on our items where we can just click on the item and get into that page. So in this guy let's just go over what we did. We created a newsletter component newsletter detail component and we provide it around. And then we talked a bit about how we have to put the less explicit routes after the more explicit ones and then I and then we've wrapped it up from there. But I just want to be more morally we can do this. If you put this here it won't work again pretty tight the exact right after here. It will say okay it has to exactly be newsletter to render this component. Otherwise don't render it just render whatever you're trying render. So it's going to slosh newsletter slash detail slash random ideas that can be anything and were brought there. [00:05:23][99.9]
[00:05:24] So I prefer to use that method and describe exact mix a little a little bit more explicit your code more understandable. It won't break if you do that so it's better to deny it's more verbose but it seems more verbose which it is but it's better. So let's just do that and with committer code and then hop into that and Skiver we will learn about link tag and react right now. So get status get out get commit the say added news letter detail component and corresponding route Kate what's happened to that next guy right now. [00:05:24][0.0]
[320.4]