Updating React state when state is an array of objects

If you were using functional components and the useState hook, you could easily use map, as long as you don't mind substituting the entire object

const [items, setItems] = useState ([
    {id: 1, someattr: "a string", anotherattr: ""},
    {id: 2, someattr: "another string", anotherattr: ""},
    {id: 3, someattr: "a string", anotherattr: ""},
])

setItems (
    items.map((item) => {
        return item.id === updatedItem.id? updatedItem: item;
    })
); 

If you wish to use a function, this is how I would do it. The function arguments are the ID of the item, the attribute that you wish to change, and the new value for that attribute.

const [array, setArray] = useState([{
    id: 1,
    value: "aws",
    othervalue: "was"
  },
  {
    id: 2,
    value: "goo",
    othervalue: "nano"
  },
  {
    id: 3,
    value: "micro",
    othervalue: "marcro"
  },
])

const updateItem = (id, whichvalue, newvalue) => {
  let index = array.findIndex(x => x.id === id);
  /* This line is only necessary if your element's ID 
     isn't its position/index in the array or related to it.
     In the case that it is, use the ID as the index, or run the function
     (binary/hash) that relates the ID to that position/index to find the 
     index.
  */
  if (index !== -1) {
    let temporaryarray = array.slice();
    temporaryarray[index][whichvalue] = newvalue;
    setArray(temporaryarray);
  } else {
    console.log('no match');
  }
}

/* longer version:
var index = array.findIndex(x => x.id === id);
let g = array[index]
g[whichvalue] = newvalue

if (index === -1) {
  console.log('no match')
} else {
  setArray(
    [
      ...array.slice(0, index),
      g,
      ...array.slice(index + 1)
    ]
  );
}
*/

// how to use the function:  
onPress = {
  () => updateItem(2, 'value', 'John Lemon')
}

Adding to answer of Mulan , you could use Object spread which much cleaner and more readable than Object.assign()

updateItem(id, itemAttributes) {
  var index = this.state.items.findIndex(x=> x.id === id);
  if (index === -1)
    // handle error
  else
    this.setState({
      items: [
         ...this.state.items.slice(0,index),
        { ...this.state.items[index], itemAttributes },  
         ...this.state.items.slice(index+1)
      ]
    });
}

And you use it like this

this.updateItem(2, {someattr: 'a new value'});

There is also a one-line solution:

this.setState({items: this.state.items.map(x => x.id === someId ? {...x, attr:'val'} : x)});

The key is to return a new array instead of mutating the state.

As @douglas-gaskell rightly pointed out, this is an O(n) operation, while @Mulan's answer is O(1). But you know how it is - algorithmic complexity matters when the n gets large. When number of items is large, I use @Mulan's answer, but when the number of items is small, I use this solution.

You can loop through the values of the state array object and replace the state. In the loop you can decide on which record you want to apply the new value if not all.

this.state = {
  items: [
    {id: 1, someattr: "a string", anotherattr: ""},
    {id: 2, someattr: "another string", anotherattr: ""},
    {id: 3, someattr: "a string", anotherattr: ""},
  ]
}

//Answer

const newState = Object.assign({}, this.state);
   
newState.items.forEach(element => {

  element.someattr= "I like it a lot";

});

this.setState(newState);