Control Array State in React

Introduction

This article is going to talk about how to handle Array State in React. All examples are under React 18 and Typescript version. Before starting, following array interface is used

tsx

interface Person {
    id: number
    name: string
}

const [people, setPeople] = React.useState<Person[]>(
  Array.from({length: 3}, (_, i) => ({
    id: i + 1,
    name: `Test: #${i + 1}`,
  }))
)

React state is Immutability property, so it's hard to use some methods in Array. Therefore, another way is recommended.

Add

At first

Basically, the unshift() method in Array is used to add element to array at first. However, it's hard to use it in React. Destructuring assignment helps to resolve it easily.

tsx

setPeople([
  {
    id: people.length + 1,
    name: 'John'
  },
  ...people,
])

At last

As explained above, Destructuring Assignment is used because the push method in Array is also hard to be used.

tsx

setPeople([
  ...people,
  {
    id: people.length + 1,
    name: 'John'
  },
])

The slice() method in Array along with Destructuring Assignment allows to add element at specific index. The slice() method of Array returns a shallow copy of array from start index to end index (Parameters).

tsx

const index = 2
setPeople([
  ...people.slice(0, index),
  {
  id: people.length + 1,
  name: 'John'
  },
  ...people.slice(index),
])

Example add a element to array at index 2 If you would like to use Array methods such as push() and pop(), Deep copy with Destructuring Assignment is useful.

tsx

const newPeople = [...people]
newPeople.push({
    id: people.length + 1,
    name: 'John'
})
setPeople(newPeople)

Update

At first

tsx

const newPeople = [...people]
newPeople[0] = {
    id: newPeople[0].id,
    name: 'New name #' + newPeople[0].id,
} 
setPeople(newPeople)

First of all, use a Destructuring Assignment to deep copy the array. Then change index0 to new data

Specific Index

tsx

const index = 2
const newPeople = [...people]
newPeople[index] = {
    id: newPeople[index].id,
    name: 'New name #' + newPeople[index].id,
} 
setPeople(newPeople)

To change element at specific index, you can use same way as add an element at first. Just add specific index instead of index 0.

Update multiple elements

The map() method of Array allows to change multiple elements by conditions.

tsx

setPeople(people.map(personEl => {
if(personEl.id % 2 === 0) {
  return {
    ...personEl,
    name: `Even - ${personEl.name}`
  }
}

return personEl
}))

Above example, change name data containing even id

Delete

At first

tsx

const newPeople = [...people]
newPeople.shift()
setPeople(newPeople)

After deep copy array with Destructuring Assignment, you can use the shift() method of Array. Similarly, the pop method allows to delete element at last

tsx

const newPeople = [...people]
newPeople.pop()
setPeople(newPeople)

Multiple elements

The filter() method of Array is good to delete multiple elements by condition.

tsx

setPeople(people.filter(personEl => personEl.id % 2 === 0))

Above example delete all elements containing odd id.