[00:00:02] Hey welcome back. In the last guy we set up our request contact component and we have it might be over and we were about to generate a list and we kind of did. But and this guy. We are going to actually develop a complaint. Actually just the item component. We're going to have our listen here and I want you to render that I am Kovalainen here for our money and support. Quest we have. So let's go ahead and let's do this by first creating a new filing or supporting Quester repine calling it support request underscore item budget. Yes. OK. And here we are entering are basically our code import React from react let's just say class port quest item extends parleyed render. And then here we want to return to some GSX and infixes where and what we want to return to his website. So we want to see return list item again. Now. Let's export its export Evald class or nonclassified support request item. Okay that's all set up. Now we just need to display some continuity here so we're going to have her. I don't see what we can just do automatically is assume we have this item in here and display the contents accordingly. So I'm just going to copy this entire object here and just follow along just so I have reference I'm going to say OK the first thing we want in here is we need it for our entire while we have our list item which is going to we can do this because I'm so we are okay. [00:01:56][114.8]
[00:01:57] We have worked with asylum and then in this list item we have a bunch of options. We have a warning sign here so let's make a deal for the warning sign and let's just call that since it's not going to be working on all these cars in progress it's going to be a different icon. Let's see if I could get there. Yeah we like that. Not going to be a warning sign so let's just call this a just cause icon and then for the next thing we need is a container for all of this joke so we have the title and we have the we have the Kenned and the unit. Okay so what we want to do is kind of structure it in a way that we can list that out nicely. So let's go ahead and say this is the container and then in here we're going to have a day for the title. So right now we can be sure of this stuff props to the table and better yet we could just use this opportunity. But documents will you just say stop Propst item or title and then we can copy this for here and start over. And then we want to display the work we get any day. We don't need another. We can just put a dashboard and see this thought process like unit and then right before that we can see that right here we can just put the name on it. Now right below this we need to add this arrow so that another event is just saying error but we need a container for these items we can actually put in the air after so. Well let's see. [00:03:59][121.9]
[00:03:59] So we have our title and then our tenant and their unit name this arrow. We want the arrow to be about as far over as the title. So what we can do is we have the title and the net and then I guess we can do this. We could display it here. No because basically what this is going to do is we're going out like Siling so it's like a column so we don't want this to be in there. Otherwise it'll be like right after this or in between somewhere we wanted to be in the row. So we'll put it back in our original list. An unsafe drop down because we know what it is and then after that we just need to put in this but there is going to be a button when you hover so we need to say it's a button called action and then the next thing is the day. Okay. And we have a date or two so you can just say this I suddenly again. Now let's see what we need to do. So this is basically going to take up these objects right here with the arrow. It's going to take up about 80 percent or so and if we so we need to put that on its own objects. What we should do with the Titelman and the arrow is actually cut this all out and wrap it all on its own. You can never have too many lives. So that's all we want to do next. This should be good. [00:05:57][117.8]
[00:05:57] Let's go ahead and use this spreader operator and throw it all into a couple instances of her support requests and see if it's working. So what's that word content. The record component the import pork quest item from DOT slash request. OK good. Now let's say in our sport quest content here instead of returning indiv we should do is return an instance of Sport says or request props was just passing well not props want to do is just in brackets here. Let's just say dot dot dot object. And what this is going to do is going to spread our spread apart or object array or items here and I'm going to put them all in individual props so I can say Kate take this around and put them on an individual title. So basically translating this over with a few lines in title is equal to the time frame body bodies equal to the bar. OK so that's exactly what we're doing here. We're just using some cool syntax of the object. And it will throw it like that. So now that we have that set up let's go ahead and let's be on her application and you we're getting tweets. You can see we have her icon which will later be an actual icon. We have our title. We have our jersey Unit 1 1 9 and then we are arrow action. And once we get our season here it's going to display the arrow where it needs to be thought to be good. OK. We are. [00:07:51][114.1]
[00:07:52] And also format that to look a little bit differently and we can actually just do it by saying Well I think I remember how all we have to do is go under I'm here and say this The president doesn't get all of you not good for you. Get it might not recognize as a date object so it might not work. Let's just say Jon Stewart did get the that should display the day. But as you can see it's not working so format that you just displayed as it is. OK. So let's go ahead and we can't even. All right it's 1:00 a.m. here. We could say right after our tape you can see it is equal to orange. Does he get returning to us as a stream. That's why it's that's why it's not recognizing it as a javascript object. So we'll do not leave on the factory OK we have our content here and we need to get rid of that car. I get to go now. It says each child in should keep Kiprop. So what we want to do is one because I don't think he is evil too. And then call it super simple answer that renders our items. Well see what we need next. So we were rendering or rendered based on the one we're selected. So right now it's pending. Now it's going to be in progress. Now can be complete or complete. So basically we want to filter this to display the objects only based on what we claim only based on selected data pending that is in our store. OK so let's go ahead and do that in the next guy or all the code and what we are saying here is developed the support quest item. And that's fine. OK. Let's go ahead and get into filtering these items in the next guy. [00:07:52][0.0]
[468.6]