array wont render on React state change

Question

I have this useState hook:

    const [products, setProducts] = useState([])

and I have these functions:

    const sortByLow =()=>{
    const newArray = products.sort((a,b)=>b.price-a.price)
    setProducts(newArray)    
    console.log(newArray);    
}
const sortByHigh =()=>{
    const newArray = products.sort((a,b)=>a.price-b.price)
    setProducts(newArray) 
    console.log(newArray);
}

a useEffect hook:

    useEffect(()=>{
    const displayProducts = async()=>{
        try {
            //fetch from server at port 3000
            const response = await fetch('http://localhost:3000/')
            if(!response.ok){
                throw new Error("displayProducts response is not ok")
            }
            
            const responseDataObject = await response.json()                
            const allProducts = responseDataObject.data.allProducts
            setProducts(allProducts);
        } catch (error) {
            console.log("theres an error" + error);
        }
    }
    //call the function, duh
    displayProducts();
    
}, [])

and the return value of the component is this:

 <div>
        {products.filter( product => {return (product.price > lowPrice && product.price < highPrice)} ).map(productObj => <ProductComponent 
        navigateToProduct = {productObj._id}
        navigateToCategory = {productObj.category}
        key = {productObj._id}
        name = {productObj.name}
        category = {productObj.category}
        price = {productObj.price}
        description = {productObj.description}
        image = {productObj.image}            
        />)}
    </div>

now I expect the product array to change according to the functions above but it wont happen for some reason. what can be the problem? please help me thanks!

Does this answer your question? [Sort an array of objects in React and render them](https://stackoverflow.com/questions/43572436/sort-an-array-of-objects-in-react-and-render-them) — Konrad, Aug 21 '22 at 14:47
`.sort` doesn't create a new reference, so React doesn't know it should rerender the component. — Konrad, Aug 21 '22 at 14:48
@KonardLinkowsky the question you suggested doesnt answer mine. regarding your second comment, what should i do instead? — Omri Azran, Aug 21 '22 at 15:25
Are you using buttons to call the sortByLow and sortByHigh functions? — Will 40, Aug 21 '22 at 15:28

score 3 · Answer 1 · answered Aug 21 '22 at 15:33

3

ok I figured it out thanks to @KonradLinkowski comment... The sort only references the original array, so in order to create a new array I should have written [...products] as the source array, as follows:

    const sortByLow =()=>{
    const newArray = [...products].sort((a,b)=>b.price-a.price)
    setProducts(newArray)    
    console.log(newArray);    
}
const sortByHigh =()=>{
    const newArray = [...products].sort((a,b)=>a.price-b.price)
    setProducts(newArray) 
    console.log(newArray);
}

Thanks to all who read and helped!

answered Aug 21 '22 at 15:33

Omri Azran

35
8

This is exactly what it in the linked question :) – Konrad Aug 21 '22 at 15:33
oh shoot I totally missed it... thanks anyway man! – Omri Azran Aug 21 '22 at 15:41

score 0 · Answer 2 · answered Aug 21 '22 at 15:55

When you sort through an array it does not make a new reference ID so it does not know to update the state. This is how you can force it to make a new reference

  const sortByLow = () => {
    const newArray = [...products];
    newArray.sort((a, b) => b.price - a.price);
    setProducts(newArray);
    console.log(newArray);
  };
  const sortByHigh = () => {
    const newArray = [...products];
    newArray.sort((a, b) => a.price - b.price);
    setProducts(newArray);
    console.log(newArray);
  };

This should update the react state

array wont render on React state change

2 Answers2