Edit Support Request Form Component in React
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

[00:00:00] And welcome back to their react OP never building in the sky. We are going to give our functionality to added items. We're going to start with that. At least we may not get done with the embarrassing since there's a lot of parts. Not the best we we've want to make it so we can edit these items and then save them on the server. So let's go ahead and let's get around to that. Let's open up our code here and let's let's go over to use newsletter content. Where a newsletter content and look at how we did this before. So we have a week let's just copy that somewhere and go into our content here. And so we have our items we wanted on each item though so what we need to do is click on these items and go into the item here and just say okay when you click on edge when you click on the description at least let's make it so we can add an item what's good word or thing here we're not displaying the description. So what say right at the bottom is or description what's the stop drop stuff I believe that is the code the property Kiyemba Cambuslang body now is based on the quick the body we are we can go somewhere. So to put this link in here and I'm going to put the body text in here. And better yet let's just switch to that and the link here. Let's put the game inside and the link on the outside. [00:01:33][93.0]
[00:01:38] OK so now you have that set up let's go ahead and import link from Reebok redux since we don't have that in here. It's modifying tax let's say import we from react read or not react. That's my reaction Robert Domm. We are hearing now say OK when we click on it we don't want to get news letter. We want to look at our site. We want to go to support request or support. OK. I'm trying to think because when we quit going we want to go to the detail when we heard that the design doesn't tell us. Let's go to Kate. This is let's get rid of let's just cancel now. It's giving designers and let's look at our own to look at our newsletter. OK so we have over items and we click on them and goes in and then the edit buttons can be in there. So basically what I'm thinking is is there a detail for this. I don't think I saw a detail for that. Oh I guess it's right here. But while this isn't the detail this will be the screen because we haven't added a new and for which means we would have to. I mean this could be considered the detail opening it up but we don't want to do that because it's on the same screen. You don't want to have a router for that. So what we should do is we should just scrap the detail around because until at least we think we need it because I don't think we need it. We just need it and new because the only options I see or hear anything new. So let's go ahead and make it what we cook the link we are right. [00:03:35][117.1]
[00:03:35] The airline routes. So all of these I would say we want you to support quest slash slash it and then we want to give you the idea of the one we clicked so that's super simple and it says this dot Propst Dileep. So get ready to brand post real quick and you can see that in there. Just like our newsletters. Okay so when you click on that should bring us to think so. RF that's a lot of work but let's just see the button is there for the item. Yes or click on it or request it. There is already a real need. Let's go ahead and add it. The route into our route stop or bootstrap. Yes my bad. So copy this getting rid of exact put in it slash Cohen underscore and you really. Now we don't want to go to support quest. We want to go to a new component which is going to be called in air support request. We're going to create a new file and we're going to call and support requests underscore digests can Outteridge can import our basic reactive import component from react class for what we can or should use just cop your newsletter because it's going to be extremely similar. So let's just call your entire newsletter read it and put in their support. Quested OK now we want to use really modifying it so it's not ours. It's not the same thing. OK so we stole the title of the body. [00:05:32][116.8]
[00:05:33] Now let's see what our forms look like are here when we actually do one service request all description and image plus his name is accordingly. Service request title. Well this is kind of a fix because this isn't the name in our in our model. So for now let's just go for a model and then when we use science we can pick stuff up like that. So we want a title and then we want a description which is the bottom and then we want the image. Okay so let's say field name is equal to title body and then we want the image so let's put in an image and the same image source is equal to and then this prompts dot because we're setting her initial values on there so we could just say this stuff draws on initial values dot image. That my work is commented off now and once just keep this form of. So give me an edit newsletter versus change all this support request. Support request. Here we want changes to. And as for request and as for request support right. Enable initialise. We want that because of that we want to populate it and it's for request we have her actions we have are fetched I know but we want this to be hard requests. So get that out and you should translate for now and then let's go here and let's get something else that prompts better use that are Abidi. What's changed just a fetch quest French or request. My best approximation Prancer maybe. Okay now it's commented out because we don't want to implement the do nothing the next guy. So this is looking pretty nice. [00:08:16][162.2]
[00:08:16] We want to save the changes to the props site save instead of using race save support request by 80. OK. And then instead of pushing the newsletter we want to see Russia to support the. So let's call it that out since we don't want to be like yes we have got that functionality. All right so that's pretty creepy. Let's go and check it out in our application in the browser and see if it's working through it. And then just cook one of these items we support request click on the item and it and so all this content in here. So let's go check our routes and see what's going on there. Case first request that it be it's rendering same content. We need to import our support request. When did we call it. That is part quest. OK. So at its request it's not a popular meeting for me. So we meaning we say a word. Let's bring separate our newsletter from around us. And once you say import requests at its best from subcomponents slash Losh some requests. OK. And it's a poor quest. OK. And then placeless go check it out. And we need to go back here and click on one click on the switch brands. Doesn't that party over. Let's check why it's go to our company form at its request. New Orleans Schweiz returning stay tied buddy still not working. OK. And the reason it's nice is obviously because we haven't implemented the actions of some to retrieve our data. So let's go ahead and commit and do that the next guy to get status get out and get it as you say set up support. Yes. [00:10:53][156.5]
[00:10:56] All right now let's say good. Well let's just leave it at that and hop into the next guy and where we will develop the action with Reno to request to fetch our support request by CNN. [00:10:56][0.0]
[645.6]