Managing an array with useState

With so many ways to manage state in react, sometimes it might be tricky or confusing to pick the right way, or at least a good way to do so. Every situation is different, and so, this article looks into locally managing an array in a functional component using the hook useState.

useState allows you to initialize some local state and use a provided function to update it later. The example in this article is rather basic but illustrates the point: you can see how to render an array of numbers, add new numbers and remove existing ones.

import { useState } from 'react'

const Numbers = ({ numbers, onRemove }) => (
  <div>
    {numbers.map(value => {
      return (
        <div key={value}>
          {value} <button onClick={() => onRemove(value)}>-</button>
        </div>
      )
    })}
  </div>
)

const App = () => {
  const [arr, setArray] = useState([0, 1, 2, 3, 4, 5])

  const appendToArray = nextElement => {
    const next_arr = [...arr, nextElement]
    setArray(next_arr)
  }
  const removeIndexFromArray = index => {
    const next_arr = [...arr.slice(0, index), ...arr.slice(index + 1)]
    setArray(next_arr)
  }

  //
  const addNext = () => appendToArray(arr.length)
  const onRemoveIndex = idx => removeIndexFromArray(idx)

  return (
    <div>
      <Numbers numbers={arr} onRemove={onRemoveIndex} />
      <button onClick={addNext}>+</button>
    </div>
  )
}

Declaring the state

The following line of code initializes the local state with the array [0, 1, 2, 3, 4, 5].

const [arr, setArray] = useState([0, 1, 2, 3, 4, 5])

Here, arr is the local state you'll use to render your page and setArray is the function to update it.

Helper functions

To easily add and remove elements, we create two functions. appendToArray will accept the new number to add to the array, and removeIndexFromArray will accept the index of the number to remove.

const appendToArray = nextElement => {
  const next_arr = [...arr, nextElement]
  setArray(next_arr)
}

const removeIndexFromArray = index => {
  const next_arr = [...arr.slice(0, index), ...arr.slice(index + 1)]
  setArray(next_arr)
}

Note: You could also remove the element from the array using arr.filter, but I'll leave this one for you.

Adding interactions

If you check the code, you'll see we are rendering two types of buttons, one to add the next number to the list and one per number to remove it. With the previously created helper functions, all we are missing is to create the callbacks needed to add to the buttons to add and remove elements which is now easy to do.

const addNext = () => appendToArray(arr.length)
const onRemoveIndex = idx => removeIndexFromArray(idx)

Final notes

You'll notice this example is rather simple. The main simplification comes from using an array with the form [0, 1, 2, 3, 4, 5]. This will probably never happen in reality but you might see some state like this [{id: 1, name: 'Paul'}, {id: 2, name: 'George'}, {id: 3, name: 'Ringo'}, {id: 4, name: 'John'}] where you will render a list of names and use the id as key. As a challenge, from the example provided previously, adapt it to handle this list of names, and you'll be on your way to properly manage arrays locally.