React JS sorting issue

Question

I'm trying to sort some data in my application. I'd like to support the following options:

Price (low to high)
Price (high to low)
Mileage (low to high)
Mileage (high to low)

It looks like price sorting is working. However, when I click on "lowest mileage", it keeps showing the highest price results - the old value of sorting. I tried useEffect, but I couldn't make it work. Here's my code:

App.js

      
      const [carList, setCarList] = useState(cars)
      const [sorting, setSorting] = useState("pricelow")
      
      const handleSort = (e) => {
        setSorting(e.target.value)
        if (sorting === "pricelow"){
          const newlist = carList.sort((a,b) => {
            return parseInt(b.carPrice) - parseInt(a.carPrice)
          })
          setCarList(newlist)
        }
        if (sorting === "pricehigh"){
          const newlist = carList.sort((a,b) => {
            return parseInt(a.carPrice) - parseInt(b.carPrice)
          })
          setCarList(newlist)
        }
        if (sorting === "kmlow"){
          const newlist = carList.sort((a,b) => {
            return parseInt(a.carMileage) - parseInt(b.carMileage)
          })
          setCarList(newlist)
        }
      }

AdsList.js

      <select className="form-select w-25" onChange={handleSort} value={sorting}>
          <option value="pricelow">Sort By Lowest Price</option>
          <option value="pricehigh">Sort By Highest Price</option>
          <option value="kmlow">Sort By Lowest Km</option>
          <option value="kmhigh">Sort By Highest Km</option>
      </select>

Can you also add carList data?

Shubham Verma
– Shubham Verma

2021-09-24 13:37:12 +00:00
Commented Sep 24, 2021 at 13:37 — Shubham Verma
– Shubham Verma, Commented Sep 24, 2021 at 13:37
sure hold on please

tallcoder
– tallcoder

2021-09-24 13:37:40 +00:00
Commented Sep 24, 2021 at 13:37 — tallcoder
– tallcoder, Commented Sep 24, 2021 at 13:37
added in code .

tallcoder
– tallcoder

2021-09-24 13:39:53 +00:00
Commented Sep 24, 2021 at 13:39 — tallcoder
– tallcoder, Commented Sep 24, 2021 at 13:39

Bassem · Accepted Answer · 2021-09-24 13:40:02Z

This is happening because the setSorting doesn't change the sorting value straight away but rather waits until the component re-renders. See https://reactjs.org/docs/react-component.html#setstate

Do this instead:

 const [sorting, setSorting] = useState("pricelow")
  
  const handleSort = (e) => {
    const sortValue = e.target.value;
    setSorting(sortValue)
    
    if (sortValue === "pricelow"){
      const newlist = carList.sort((a,b) => {
        return parseInt(b.carPrice) - parseInt(a.carPrice)
      })
      setCarList(newlist)
    }
    if (sortValue === "pricehigh"){
      const newlist = carList.sort((a,b) => {
        return parseInt(a.carPrice) - parseInt(b.carPrice)
      })
      setCarList(newlist)
    }
    if (sortValue === "kmlow"){
      const newlist = carList.sort((a,b) => {
        return parseInt(a.carMileage) - parseInt(b.carMileage)
      })
      setCarList(newlist)
    }
  }

Another tip, use a switch/case for cleaner code.

Sojin Antony · Accepted Answer · 2021-09-24 13:49:15Z

setSort function will not set the value instantly. it only changes the value on it next render

best method is to use useEffect hook

  const [carList, setCarList] = useState(cars)
  const [sorting, setSorting] = useState("pricelow")
  useEffect(()=> {
    if (sorting === "pricelow"){
      const newlist = carList.sort((a,b) => {
        return parseInt(b.carPrice) - parseInt(a.carPrice)
      })
      setCarList(newlist)
    }
    if (sorting === "pricehigh"){
      const newlist = carList.sort((a,b) => {
        return parseInt(a.carPrice) - parseInt(b.carPrice)
      })
      setCarList(newlist)
    }
    if (sorting === "kmlow"){
      const newlist = carList.sort((a,b) => {
        return parseInt(a.carMileage) - parseInt(b.carMileage)
      })
      setCarList(newlist)
    }
  },[sorting])





<select className="form-select w-25" onChange={(e)=>setSorting(e.target.value)} value={sorting}>
      <option value="pricelow">Sort By Lowest Price</option>
      <option value="pricehigh">Sort By Highest Price</option>
      <option value="kmlow">Sort By Lowest Km</option>
      <option value="kmhigh">Sort By Highest Km</option>
  </select>

Collectives™ on Stack Overflow

React JS sorting issue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related