CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-router-dom
Xena
Xena

Reputation: 377

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.

 <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

Upvotes: 2

Views: 292

Answers (2)

Jakir Hossen
Jakir Hossen

Reputation: 461

Try this Array.filter method:

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

Upvotes: 1

Ajeet Shah
Ajeet Shah

Reputation: 19863

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.

Upvotes: 2

Related Questions