When I update the state, component is not re-rendering-CodePudding

I have few items on my website, I am trying to sort them in different orders. When I change the data object, it is updating itself but unfortunately component are not updating themselves.

I have made sure that db array is updating but update doesn't affect items.

I am using a pseudo database to represent it.

function SaleBody() {
const [db, setDb] = useState([
    { img: house1, price: 46000 },
    { img: house2, price: 58000 },
    { img: house3, price: 82000 },
    { img: house4, price: 32000 },
]);
const handleClick = () => {
    setDb(
        db.sort(function (a, b) {
            return b.price - a.price
        })
    )
}
return (
    <React.Fragment>
        <div className='sort'>
            <p>Sort By</p>
            <div className="dropdown">
                <img id='dropdown-btn' src={dropdownIcon} />
                <div className="dropdown-content">
                    <a onClick={handleClick} href="#">Price Ascending</a>
                    <a href="#">Price Descending</a>
                    <a href="#">Random</a>
                </div>
            </div>

        </div>
        <div className='sale-body-item'>
            <img src={db[0].img} />
            <div className='house-text'>
                <div className='house-text-item'>
                    <h1>For Sale</h1>
                    <p>${db[0].price}</p>
                </div>
                <div className='house-text-item'>
                    <h1>Adress</h1>
                    <p>Lorem Ipsum St.</p>
                </div>
                <div className='house-text-item'>
                    <p>3 bedrooms,</p>
                    <p>2 bathrooms,</p>
                    <p>40m2 garden</p>
                </div>

            </div>
            <Link to='/item'><button>More Information</button></Link>
        </div>
        <div className='sale-body-item'>
            <img src={db[1].img} />
            <div className='house-text'>
                <div className='house-text-item'>
                    <h1>For Sale</h1>
                    <p>${db[1].price}</p>
                </div>
                <div className='house-text-item'>
                    <h1>Adress</h1>
                    <p>Lorem Ipsum St.</p>
                </div>
                <div className='house-text-item'>
                    <p>3 bedrooms,</p>
                    <p>2 bathrooms,</p>
                    <p>40m2 garden</p>

                </div>
            </div>
            <button>More Information</button>
        </div>

solutions are appreciated.

CodePudding user response：

The reason why the component isn't re-rendering is because The sort() method sorts the elements of an array in place and returns the reference to the same array, now sorted.

Change your code to,

 setDb(
        [...db.sort(function (a, b) {
               return b.price - a.price
            })
        ]
    )

CodePudding user response：

setDb(oldDb => [...oldDb].sort((a, b) => b.price - a.price))

First copy the array, then sort