react setState doesn't update array value by index

Question

does anybody know why updating specific index value like this doesn't work ?

const [results, setResults] = useState([...Array(data.length)].map(e => []));

const updateResults = (index, value) => { //value is for sur an array of one dimension
    let newArray = results;
    newArray[index] = value
    console.log(newArray) //verifying that it is OK (works well)
    setResults(newArray) //has no effect
}

oh my god you're a genious, thought ... was only for objects, and not for array — tony_merguez
– tony_merguez, Commented Jan 2, 2022 at 10:46
it's because in your manner, you are just mutating the previous value and react doesn't recognize any update in the state. in order to update your state, you need to pass new array to setResults method. — Saeed Shamloo
– Saeed Shamloo, Commented Jan 2, 2022 at 10:50
... works for array and objecst. Here you can read more about it developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Saeed Shamloo
– Saeed Shamloo, Commented Jan 2, 2022 at 10:51

Rugved Tipare · Accepted Answer · 2022-01-02 10:49:05Z

1

React uses Object.is under the hood so that it knows when to re-render the component. To overcome this, use:

const [results, setResults] = useState([...Array(data.length)].map(e => []));

const updateResults = (index, value) => {
    let newArray = [...results]; // Object.is(results, newArray) will return false
    newArray[index] = value
    console.log(newArray)
    setResults(newArray)
}

answered Jan 2, 2022 at 10:49

Rugved Tipare

681 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

react setState doesn't update array value by index

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related