Updating state as a nested object

Question

I have this type of state in my app

state = {
  abc: true,
  array: [
    { id: 12345, done: false },
    { id: 10203, done: false },
    { id: 54321, done: false }
  ]
};

I am looking for a solution to the following problem: I need to change done property accordingly to passed id like in the following function when something like this handle(12345) is passed as an argument to handle function :

  handle = id => {
  this.state.array.map(e => {
    if (e.key === id) {
      this.setState({array: [
        { id: id, done: true },
        { id: 10203, done: false },
        { id: 54321, done: false }
      ]})
    }
  });
};

In simple words I need to change just one object in array based on provided id.

Thanks for any help or tips!

github.com/kolodny/immutability-helper

Mulan
– Mulan

2018-08-22 20:55:08 +00:00
Commented Aug 22, 2018 at 20:55 — Mulan
– Mulan, Commented Aug 22, 2018 at 20:55

Arup Rakshit · Accepted Answer · 2018-08-22 20:50:52Z

4

I'd write the handle method as:

handle = id => {
  this.setState(prevState => {
    const { array } = prevState;
    return {
      array: [
        ...array.filter(o => o.id !== id),
        {id, done: true}
      ]
    };
  });
};

The idea here is that, remove the matching id from old state, and then add a new object to the array with id and done property as {id, done: true}.

answered Aug 22, 2018 at 20:50

Arup Rakshit

119k30 gold badges270 silver badges328 bronze badges

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

1 Comment

sleighty Over a year ago

This also changes the order of the array elements though

skyboyer · Accepted Answer · 2018-08-22 20:51:57Z

3

Once you are allowed to restructure state to be hashmap instead of array:

state = {
  abc: true,
  array: {
    12345: { done: false },
    10203: { done: false },
    54321: { done: false }
  ]
};

then you will be able to use power of spread operator:

let id = 12345;
this.setState({
    array: {
        ...this.state.array,
        [id]: {
            ...this.state.array[id], 
            done: true
        }
    }
});

Otherwise using array.map() seems to be the only option

answered Aug 22, 2018 at 20:51

skyboyer

24k7 gold badges65 silver badges73 bronze badges

Comments

sleighty · Accepted Answer · 2018-08-22 20:54:41Z

1

You can use this Redux pattern to return a new array with the element in question being changed, while keeping your array immutable:

handle = id => {
  const updatedArray = this.state.array.map(e => {
    if (e.key === id) {
      return { id: id, done: true };
    }
    else {
      return e;
    }
  });
  this.setState({array: updatedArray});
};

This keeps your data structures immutable while changing only what you need to change.

answered Aug 22, 2018 at 20:54

sleighty

1,11513 silver badges34 bronze badges

Comments

Aegletes · Accepted Answer · 2018-08-22 20:56:04Z

0

var newArray = this.state.array;
  for(var i = 0; i < newArray.length; i++){
      if(newArray[i].id === 12345) {
        newArray[i].done = true;
      }
  }

  this.setState({array: newArray});

By creating the newArray here you will be avoiding directly touching the state element, so you can change anything you want inside it afterwards you can set the state.

answered Aug 22, 2018 at 20:56

Aegletes

5002 gold badges7 silver badges22 bronze badges

2 Comments

Arup Rakshit Over a year ago

Are you still using for loop ? :)

Aegletes Over a year ago

Hi @ArupRakshit I wanted to simplify it for our friend, since the question he was asking is rather simple, so I assumed there is a possibility he is a beginner, this way it'd be easier for him to understand. Fortunately I am not here to boast about my skills or undermine others. Have a good day.

Collectives™ on Stack Overflow

Updating state as a nested object

4 Answers 4

1 Comment

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related