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.

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.

• javascript
• reactjs

• 1 You're mutating state. When you mutate state React does not know it needs to re-render, and you don't see your updates. Please see the documentation on push. – Brian Thompson Commented Sep 29, 2021 at 21:00
• 1 Does this answer your question? Correct modification of state arrays in React.js – Brian Thompson Commented Sep 29, 2021 at 21:02
• Yeah that'll do it. Mostly my inexperience with Javascript not thinking to make a shallow copy – Jeffrey Carr Commented Sep 29, 2021 at 21:07

4 Answers 4

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

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

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]);
}

For changing array state, you should use:

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