13

So i've been working on this for awhile and felt it would be best to refactor my code so that the state is set up as an array of objects. What i'm trying to do is increment a number on a button click.

I have a callback function in a component that triggers a function to update the state...however i'm having difficulty targeting the key value within the object.

My initial state looks like this:

getInitialState: function() {
    return {
      items: [
        {
          links: 'zest',
          trackId: 1023,
          songTitle: 'z know the others',
          artist: 'zuvet',
          upVotes: 0
        },
        {
          links: 'alpha',
          trackId: 987,
          songTitle: 'ass',
          artist: 'arme',
          upVotes: 3
        },
      ]
    }

I am trying to target the upVotes key, but can't figure out how. My function passes a key so that I can target the index in the array, but when I try to do something like: this.setState({items[key]: {upVotes: this.state.items[key].upVotes + 1}}) it throws an error due to the unexpected [ token.

I have tried something similar to this thread here, but I keep getting errors.

What kind of function can I write that will setState of just the key in the object that I want to target?

Community
  • 1
  • 1
Elliott McNary
  • 1,149
  • 3
  • 11
  • 20

2 Answers2

29

Get current state, modify it and setState() it:

var stateCopy = Object.assign({}, this.state);
stateCopy.items[key].upVotes += 1;
this.setState(stateCopy);

Note: This will mutate the state. Here's how to do it without mutation:

var stateCopy = Object.assign({}, this.state);
stateCopy.items = stateCopy.items.slice();
stateCopy.items[key] = Object.assign({}, stateCopy.items[key]);
stateCopy.items[key].upVotes += 1;
this.setState(stateCopy);
Radosław Miernik
  • 4,004
  • 8
  • 33
  • 36
  • 2
    after the react documentation, everything should be donne in setState( oldState => your code ) – crak Jun 07 '17 at 15:44
  • @crak: checkout the [`setState` API](https://facebook.github.io/react/docs/react-component.html#setstate). – Radosław Miernik Jun 07 '17 at 18:45
  • 1
    @RadosławMiernik where is key coming from?? – The Walrus Apr 08 '18 at 18:13
  • @TheWalrus it's mentioned in the question, therefore I assumed it is defined somewhere. – Radosław Miernik Apr 09 '18 at 18:44
  • What is it for? `stateCopy.items = stateCopy.items.slice();` – Pavel Zorin Mar 17 '20 at 03:40
  • 2
    @ПавелЗорин: setting an array index to a given value (`array[index] = value`) is modifying the array. We cannot alter it, so we'd have to (shallow) copy the array - [`slice`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) is a great way of doing so. – Radosław Miernik Mar 23 '20 at 20:22
  • Your second solution still mutates the state directly. `Array.prototype.slice()` only creates a shallow copy of the array, so each element of `stateCopy.items` points to the same object as the elements of `this.state.items` – Ryan Feb 23 '21 at 01:42
  • Yes, `.slice()` creates a shallow copy. That's why there's this `Object.assign` in the third line, cloning the array element. – Radosław Miernik Feb 23 '21 at 08:18
9

It's possible to directly edit the value on your array and set the state to the modified object, considering you're not using immutable.js, that is...

this.state.array[i].prop = 'newValue';
this.setState({ array: this.state.array });

The problem with direct editing is that React doesn't know the state changed and the update lifecycle doesn't fire. But setting the state again forces an update.

-- EDIT --

If state is Immutable...

const array = this.state.array.slice();
array[i].prop = 'newValue';
this.setState({ array });

-- EDIT 2 --

Thanks to the selected answer I realized this would still mutate the element since the array contains only references to the object in question. Here's a concise ES6-y way to do it.

const array = [...this.state.array];
array[i] = { ...array[i], prop: 'New Value' };
this.setState({ array });
Vinícius Negrão
  • 655
  • 5
  • 14