Updating list with state React

Question

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.

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`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push). — Brian Thompson, Sep 29 '21 at 21:00
Does this answer your question? [Correct modification of state arrays in React.js](https://stackoverflow.com/questions/26253351/correct-modification-of-state-arrays-in-react-js) — Brian Thompson, Sep 29 '21 at 21:02
Yeah that'll do it. Mostly my inexperience with Javascript not thinking to make a shallow copy — Jeffrey Carr, Sep 29 '21 at 21:07

score 5 · Accepted Answer · answered Sep 29 '21 at 21:01

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

score 2 · Answer 2 · answered Sep 29 '21 at 21:03

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

score 1 · Answer 3 · edited Sep 29 '21 at 21:08

1

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

edited Sep 29 '21 at 21:08

Dharman

30,962
25
85
135

answered Sep 29 '21 at 21:03

uditkumar01

400
5
11

`newFavorites` is useless here. 1) it doesn't make a true copy of `favorites`, and 2) it doesn't get mutated anyway since you spread the values into the new state array – Brian Thompson Sep 29 '21 at 21:04
@BrianThompson true – uditkumar01 Sep 29 '21 at 21:06

score 0 · Answer 4 · answered Sep 29 '21 at 21:09

0

For changing array state, you should use:

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

answered Sep 29 '21 at 21:09

Jair Lopez Gutierrez

164
4

Updating list with state React

4 Answers4