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 K · Accepted Answer · 2021-12-15 09:20:11Z

59

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

edited Dec 15, 2021 at 9:20

answered Mar 25, 2018 at 15:41

Omar K

3,4213 gold badges25 silver badges41 bronze badges

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

3 Comments

EL TEGANI MOHAMED Over a year ago

@Omar I need to update the whole objects in the array ??

Omar K Over a year ago

Then just do const updatedValues = array.map(item => { return { ...item, updatedKey: ‘value’ } })

Emile Bergeron Over a year ago

Object.assign(obj mutates the current state object which is an anti-pattern in React. Object.assign({}, obj would correctly create a new object.

simka · Accepted Answer · 2018-03-25 15:39:26Z

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, 2018 at 15:39

simka

9018 silver badges9 bronze badges

2 Comments

Saikat Dey Over a year ago

Then how to iterate all the objects ?

simka Over a year ago

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

J Livengood · Accepted Answer · 2018-03-25 15:37:21Z

-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, 2018 at 15:37

answered Mar 25, 2018 at 15:34

J Livengood

2,7261 gold badge15 silver badges27 bronze badges

5 Comments

bamtheboozle Over a year ago

let itemList = this.state.itemList;. If you modify itemList after this, you are mutating the state.

J Livengood Over a year ago

Not when you slice it.

Omar K Over a year ago

@DragoşPaulMarinescu you're wrong slice creates a copy

bamtheboozle Over a year ago

Since the post was edited, it's obvious my comment referred to the initial code.

Omar K Over a year ago

@DragoşPaulMarinescu didnt see the edit, did just now though

MUJEEB RAHMAN · Accepted Answer · 2021-03-25 06:35:31Z

-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, 2021 at 6:35

answered Mar 24, 2021 at 14:33

MUJEEB RAHMAN

11 bronze badge

Collectives™ on Stack Overflow

SetState of an array of Objects in React

4 Answers 4

answered March 25 2018

answered Dec 12 2019 (REACT HOOKS)

3 Comments

2 Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

answered March 25 2018

answered Dec 12 2019 (REACT HOOKS)

3 Comments

2 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related