ReactJS: Change the index of an array in a state

Question

I am trying to update the index of an array inside React state. The problem is that i cannot access the index of the array using setState() method.

My code looks like this:

handleLike(post) {
        axios.get(`/likes/${post}`)
            .then(response => {
                this.state.posts.forEach((entry, index) => {
                    if (entry.id === post) {
                        this.setState({posts[index]: response.data})
                    }
                })
            })
    }

I expect the array content to be updated with the response data but instead, it throws an error. How can I update the index of an array in React state?

[This](https://stackoverflow.com/questions/26253351/correct-modification-of-state-arrays-in-reactjs) will help you — Vencovsky, Apr 27 '19 at 16:31

Mayank Shukla · Accepted Answer · 2019-04-27T16:38:28.960

The way you are setting data in setState is not correct. Write it like this:

handleLike(post) {
  axios.get(`/likes/${post}`)
    .then(response => {
      this.setState(prevState => ({ 
         posts: prevState.posts.map(el => el.id == post? response.data: el) 
      }))
    })
}

Why your code is not working?

Because posts[index] will be a value (object), and that will not a correct JS key.

To update the any value in state, you need to clone it first, do that changes, and pass the updated value to correct key in setState method.

Since you want to update a single object in array of objects, use updater function (because setState is async and new value will be dependent on previous value of state array), run map on array, return the new object for true condition, otherwise return the same object.

Example:

let stateArr = [{a:1, id:1}, {a:2, id:2}, {a:3, id:3}]

let newObj = {a: 10, id: 2}
const key = 2;

let newStateArr = stateArr.map(el => el.id == key? newObj: el);

console.log('old array', stateArr);
console.log('new array', newStateArr);

That's an impressive code right there. Thanks for the explanation also. — Israel Obanijesu, Apr 27 '19 at 17:00

score 1 · Answer 2 · answered Apr 27 '19 at 16:28

1

Try this

...
if (entry.id === post) {
    // get all of the posts in a new variable
    let newPost = [...post]
    // set only the index you want
    newPost[index] = response.data
    // set newPost to the state
    this.setState({post: newPost})
}

answered Apr 27 '19 at 16:28

Vencovsky

28,550
17
109
176

ReactJS: Change the index of an array in a state

2 Answers2