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..)

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.

 <Route
        exact
        path="/catalog/typeCar"
        render={({ match }) => (
          <Catalog item={data.find((item) => String(item.typeCar) === String(match.params.typeCar))} />
        )}

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

      <Link  to={`/catalog/passanger`}><img src={img_4} className='white-fill mr-2' width='70px'/></Link> 
            
      <Link  to={`/catalog/bike`}> <img src={img_1} width='70px' className='white-fill mr-2' /></Link>

      <Link  to={`/catalog/suv`}> <img src={img_2} width='70px' className='white-fill' /></Link>

      <Link  to={`/catalog/bus`}> <img src={img_3} width='70px' className='white-fill ml-2' /></Link>

 </Col>

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

Answer

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

<Route
  exact
  path="/catalog/:typeCar" // Here
  render={({ match }) => (
    <Catalog
      item={data.find(
        (item) => String(item.typeCar) === String(match.params.typeCar)
      )}
    />
  )}
/>

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.

Advertisement

Answer