How do you update arrays inside state?

Eventhough arrays in JavaScript are mutable in nature, you need to treat them as immutable while storing them in a state. That means, similar to objects, the arrays cannot be updated directly inside state. Instead, you need to create a copy of the existing array and then set the state to use newly copied array.

To ensure that arrays are not mutated, the mutation operations like direct direct assignment(arr[1]='one'), push, pop, shift, unshift, splice etc methods should be avoided on original array. Instead, you can create a copy of existing array with help of array operations such as filter, map, slice, spread syntax etc.

For example, the below push operation doesn't add the new todo to the total todo's list in an event handler.

      onClick = {
        todos.push({
          id: id+1,
          name: name
        })
      }
      

This issue is fixed by replacing push operation with spread syntax where it will create a new array and the UI updated with new todo.

      onClick = {
        [
          ...todos,
          { id: id+1, name: name }
        ]
      }