0

I can't figure out what is wrong . Basically there is a filter component that passes either low or high value and the product is meant to change based on the value. The first value change works but after that, the Cardlist products props doesn't change

function ProductOverview({products, history}) {
let [productsValue, setProducts] = useState(products);


const setFilter = (value) => {
    let sortedProduct;
    if (value === 'low'){
        sortedProduct = products.sort((a, b) => a.price - b.price)
        setProducts(sortedProduct);

    }
    else if (value ==='high'){
        console.log("higg")
        sortedProduct = products.sort((a, b) => b.price - a.price)
        setProducts(sortedProduct)


    }

     

  };



return (
  <div className="product-overview">
    <Filter setValue={setFilter} />
    {products.length > 0 ? (
      <CardList products={productsValue} />
    ) : (
      <div className="empty-list">No Item</div>
    )}
  </div>
);

}

Udendu Abasili
  • 1,163
  • 2
  • 13
  • 29
  • 1
    `value = 'high'` is probably the issue. Maybe you wanted to check as `value === 'high'` instead of assignment. – norbitrial Aug 10 '20 at 21:22
  • thats is a typo. I had the comparison in the real code – Udendu Abasili Aug 10 '20 at 21:24
  • 1
    Array.sort sorts the array _in place_ and returns _the same array_. Calling `setProducts` with the same array won't trigger a re-render. See answer linked above. – ray Aug 10 '20 at 21:26

0 Answers0