How to Filter Items 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] Hey welcome back to the reactor cores where we're building out this property management. So when this guide it's going to be pretty quick. All we want to do is basically filter our items based on the selected PIECE OF STATE We have an obsolete props here and our content. So going to the design if I click on any progress it's going to render different items I click on pending it's going to render different items. So pretty simple logic here. The idea is OK when we click this our state is going to be equal to our pending piece of state or not pending but our whatever it is our me pull it up real quick. Our selected piece of state is going to be equal to whenever we click so complete in progress are pending. Okay. So right now it's like the defending Super super simple logic. All we have to do is support requests content here is just say ok with this thought process that selected schleps cut that we actually want to put it in here. So we're mapping over our support requests. We know that our support requests have a value of status. I can't point to it pointing to it because if I move we're not going to see it. Basically each one of these items has a status OK. Now let me pull up the Monitor Oakland. Oh it's one that we have support request and it says two keys for some reason. OK. It's pending and support requests that I was getting these mixed up anyway. We have nine he's on each of these items and there's four items for us. [00:01:57][116.7]
[00:01:57] Basically each one of these has a different status. So for Big Sean he's got status quo. For myself I have no status of in progress for Jesse that is happening Angie hedgie Oh it is not in your anyway. Basically the idea here is we have different statuses so super simple. Let's just do it. If this prompts that selected is equal to object status. So what we're doing here is going through it saying okay it's equal to it then we want to render it if it's not. Don't return anything. We're not going to render the item therefore we won't see it on the screen. So let's do that let's save it had torn up wait for it to reload. And it looks like since we have pending automatically selected it's going to display only the pending items. OK now if we select the progress again to undermine Hannah's status and progress it's displaying that when I select complete it's going to show Big Sean's case super super simple logic. And I actually haven't built this out before. I'm basically improvising here throughout this whole app so I'm not going to do it like this. I had a different idea in mind. So I was pretty surprised with how simple this turned out. But yeah that works great. And we're displaying the correct ones. So we're done with that piece of functionality. Let's say that it's an internal get I'd get commit let's just say filtering selected item carry. Yeah we get the point. Now let's not push it. Let's I'm really bad content messages. [00:03:46][109.4]
[00:03:47] You should try to make them good but I'm not that good of them anyway. Let's look at what we got here. We have boxes filtering what's the next step. We need to take. Let's go to our design here and see what we got to do. So in the end the animation of the down this design is not letting me use that dropdown but I'm going to do that yet. Let's go ahead and add in the added functionality and then the functionality. So those are the next I don't know how many guys a couple are so we're just going to add the edit and the add functionality much like we did in the newsletter sort of guide. So let's go ahead and hop into that right now see in the next video. [00:03:47][0.0]
[226.2]