CODEWITHSUNDEEP
javascriptreactjsreact-native
user8045426
user8045426

Reputation: 57

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

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: [] 
    }
  }

Upvotes: 3

Views: 813

Answers (2)

Blacky Wolf
Blacky Wolf

Reputation: 439

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.

Upvotes: 2

Hemadri Dasari
Hemadri Dasari

Reputation: 34014

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

Upvotes: 1

Related Questions