TypeError: undefined is not a function (evaluating 'this.state.list.map')

Question

so I'm trying to push a variable onto an array called list from my state. But it is throwing off this error saying that undefined is not a function. However, when I switch push to concat, it works. But I want to use push because it is faster. How do I fix this problem?

AsyncStorage.getItem("one").then((value) => {
    if (value === "true"){
      this.setState({
        list: this.state.list.push({
          name: 'Butter',
          checkbox: 1,
        })
      })
    }
    else {
      this.setState({
        unavailable: this.state.unavailable.push(
          "butter"
        )
      })
    }
});

My list is declared like this

  constructor() {
    super()
    this.state = {
      unavailable: [],
      list: [] 
    }
  }

Answer 1

Array.push() does not return the array, it returns the array length. Thus, the list changes from an array to a number. It also mutates the array directly.

As others have stated, it'd be better to do something like this:

this.setState({
    list: [
        ...this.state.list,
        { name: 'Butter', checkbox: 1 }
    ]
})

This way the state is not mutated directly from using push() .

Thought I'd also explain what is happening for those interested. Instead of mutating, or changing, the ths.state.list array directly, we're copying the current array to a new array and also appending the new item at the same time.

Answer 2

If I understand correctly you have a problem with pushing data into React state array

You need to push values to array like below in React. You are doing incorrect way also you are never recommended to mutate any state in React. Below is the recommended way to mutate React state array

  this.setState(prevState => {
    list: [...prevState.list, {
      name: 'Butter',
      checkbox: 1,
    }]
  })

Like change this to

   this.setState( prevState => {
    unavailable: [...prevState.unavailable, "butter"]
  })

Also keep in mind that you are not recommended to do setState in loop. When you want to modify the state value from the loop then declare a local variable and use that for assigning values from loop and finally do setState outside the loop otherwise you will get infinite warnings