Go Back

React: Summary of useful Array Methods

Posted on 2018-10-19

I see a lot of React beginners having problems with functional programming methods when working on the state of an array.

In the end, we need three operations, like the C, U, D in CRUD:

  • Creating new data / adding data to the array
  • Deleting / removing data from the array
  • Updating data in the array

From a functional standpoint,

  • Creating is using existing data and concating it with other data: concat
  • Deleting is using existing data and filtering out the (un)needed data: filter
  • Updating is using existing data and mapping it onto something new: map
const origNumbers = [1, 2, 3]

// creating new data => add the number 4
const addedNewNumber = origNumbers.concat(4) // [1,2,3,4]

// deleting data => remove even numbers
const removedSomeNumbers = origNumbers.filter(number => number % 2) // [1,3]

// updating data => update number by adding 1 to it
const numbersPlusOne = origNumbers.map(number => number + 1) // [2,3,4]