Skip to content
Advertisement

How to filter cars by key-value

I implement car auction, and I have a car items list inside the catalog component. I have buttons that specify the type of car (suv, bike, passenger..) enter image description here

when I click on any of the buttons, I want to redirect to catalog with a filtered list of cars with according typeCar. So data with objects is in App.js I have a Catalog component inside App.js The catalog component has a list of CarItems (CarItem is a child in Catalog that receives props and shows info about every car (I used the map to show the whole list). The problem that the catalog is not filtered. I declared Route in App.js.

JavaScript

buttons are in another component, and I created links for each:

JavaScript

So I click on a button and see URL is changed: http://localhost:3000/catalog/passanger , but there is no info on the page. it’s not redirecting to the Catalog page (component) with a list of CarItems

Advertisement

Answer

You have incorrectly defined your routes with URL params. You need to use :typeCar:

JavaScript

After this when you go to a route like /catalog/bike using Link or history.push, the value of match.params.typeCar (in Route’s match object) will be bike.

User contributions licensed under: CC BY-SA
7 People found this is helpful
Advertisement