SetState of an array of Objects in React

Question

Ok, so I'm so frustrated finding the right solution so I'm posting the problem here. Giving an answer would help me a lot, coz I'm stuck!

the state tree looks like this

this.state = {
      itemList : [{
                    _id : 1234,
                   description : 'This the description',
                   amount : 100
                    }, {
                    _id : 1234,
                   description : 'This the description',
                   amount : 100
                    }],
     }

The problems are :

can not update any specific key in the Object of the array according to the _id
The previous state should remain intact

Omar · Accepted Answer · 2021-12-15T09:20:11.797

answered March 25 2018

This is how you would use setState and prevstate to update a certain attribute of an object in your data structure.

this.setState(prevState => ({
    itemList: prevState.itemList.map(
    obj => (obj._id === 1234 ? Object.assign(obj, { description: "New Description" }) : obj)
  )
}));

answered Dec 12 2019 (REACT HOOKS)

import React, { useState } from 'react';
const App = () => {
  const [data, setData] = useState([
    {
      username: '141451',
      password: 'password',
      favoriteFood: 'pizza',
    },
    {
      username: '15151',
      password: '91jf7jn38f8jn3',
      favoriteFood: 'beans'
    }
  ]);
  return (
    <div>
    {data.map(user => {
      return (
        <div onClick={() => {
          setData([...data].map(object => {
            if(object.username === user.username) {
              return {
                ...object,
                favoriteFood: 'Potatos',
                someNewRandomAttribute: 'X'
              }
            }
            else return object;
          }))
        }}>
        {JSON.stringify(user) + '\n'}
        </div>
      )
    })}
    </div>
  )
}

Then just do const updatedValues = array.map(item => { return { ...item, updatedKey: ‘value’ } }) — Omar, Dec 18 '19 at 16:46
`Object.assign(obj` mutates the current state object which is an anti-pattern in React. `Object.assign({}, obj` would correctly create a new object. — Emile Bergeron, Mar 06 '20 at 19:40

score 1 · Answer 2 · answered Mar 25 '18 at 15:39

1

to update state constructed like this you will have to find index of element you want to update, copy the array and change found index.

it's easier and more readable if you keep list of records as object, with id as a key and record as a value.

answered Mar 25 '18 at 15:39

simka

851
8
9

Then how to iterate all the objects ? – Saikat Dey Mar 25 '18 at 15:47
if you're using lodash or ramda in your app, you can use that, or you can use Object.keys(). i usually use redux to keep data like this and use reselect, so my selectors return arrays – simka Mar 25 '18 at 17:28

J Livengood · Answer 3 · 2018-03-25T15:37:21.187

-3

The only way to do this will be to copy itemList, modify it, and set the state to it.

update() {
   let itemList = this.state.itemList.slice();
   //update it
   this.setState({ itemList });
}

edited Mar 25 '18 at 15:37

answered Mar 25 '18 at 15:34

J Livengood

2,729
1
12
26

`let itemList = this.state.itemList;`. If you modify `itemList` after this, you are mutating the state. – bamtheboozle Mar 25 '18 at 15:36
Not when you slice it. – J Livengood Mar 25 '18 at 15:38
2

@DragoşPaulMarinescu you're wrong slice creates a copy – Omar Mar 25 '18 at 15:46
1

Since the post was edited, it's obvious my comment referred to the initial code. – bamtheboozle Mar 25 '18 at 16:00
@DragoşPaulMarinescu didnt see the edit, did just now though – Omar Mar 26 '18 at 01:35

MUJEEB RAHMAN · Answer 4 · 2021-03-25T06:35:31.317

-3

Best way to update data into an array of objects

onChange={ (e) => this.setState({formData: { ...this.state.formData, 'plan_id': e.target.value}})}

edited Mar 25 '21 at 06:35

answered Mar 24 '21 at 14:33

MUJEEB RAHMAN

1
1

SetState of an array of Objects in React

4 Answers4

answered March 25 2018

answered Dec 12 2019 (REACT HOOKS)

Linked