Updating list with state React-CodePudding

I'm having trouble understanding why a list won't update in React. For my website that I'm building, I'm trying to add a 'favorites' button, but when you click the button it updates the state but the changes never re-render in the list. I tried to make a simpler version, but this doesn't work either:

import React, { useState } from 'react';
import './App.css';

function App() {
    const [favorites, setFavorites] = useState([]);

    function addFavorite(name, id) {
        let newFavorites = favorites;
        let newFav = {name: name, id: id};

        newFavorites.push(newFav);

        setFavorites(newFavorites);
    }

    return (
        <div className="App">
            <ul>
                {favorites.map((val) => {
                    return(<li key={val.id}><span>{val.name}</span></li>);
                })}
            </ul>

            <button onClick={() => addFavorite("Thing1", 1)}>Thing 1</button>
            <button onClick={() => addFavorite("Thing2", 2)}>Thing 2</button>
            <button onClick={() => {console.log(favorites)}}>Check</button>
        </div>
    );
}

export default App;

I can see the state changes in the console when I log them, but the <ul> element never updates. I've looked online but most of the articles I've found have not been very helpful (I feel the example code I wrote looks a lot like this article.

CodePudding user response：

let newFavorites = favorites;

This assigns newFavorites to point to favorites

newFavorites.push(newFav);

Because newFavorites points to favorites, which is an array in state, you can't push anything onto it and have that change render.

What you need to do, is populate a new array newFavorites with the content of favorites.

Try

const newFavorites = [...favorites];

That should work

CodePudding user response：

I would make some changes in your addFavourite function:

function addFavorite(name, id) { let newFav = {name, id};

    setFavorites([…favourites, newFav]);

}

This way, everytime you click favourite, you ensure a new array is being created with spread operator

CodePudding user response：

Its not working because use are mutating the existing state. The list is updating but it won't render as useState only renders when the parameter passed to it is different from previous one but in your case though you are changing the list items still the reference is not altering.

To make it work you can use spread operator for lists for even Array.concat() returns a new updated array.

function addFavorite(name, id) {
        let newFav = {name: name, id: id};

        setFavorites(prev=>[...prev, newFav]);
}

CodePudding user response：

For changing array state, you should use:

function addFavorite(name, id) {
    let newFav = { name: name, id: id };
    setFavorites((favorites) => [...favorites, newFav]);
}