So by changing en, you are also changing en. When dealing with arrays inside React state, you will need to avoid the methods in the left column, and instead prefer the methods in the right column:Ĭoncat, spread syntax ( example)Īlternatively, you can use Immer which lets you use methods from both columns.Īlthough nextList and list are two different arrays, nextList and list point to the same object. Here is a reference table of common array operations. Then you can set your state to the resulting new array.

To do that, you can create a new array from the original array in your state by calling its non-mutating methods like filter() and map(). Instead, every time you want to update an array, you’ll want to pass a new array to your state setting function.

This means that you shouldn’t reassign items inside an array like arr = 'bird', and you also shouldn’t use methods that mutate the array, such as push() and pop().

Like with objects, you should treat arrays in React state as read-only.

In JavaScript, arrays are just another kind of object.

How to make array copying less repetitive with Immer.

How to update an object inside of an array.

How to add, remove, or change items in an array in React state.

Slice reactjs