setState is not updating state properly

Question

Sorry, I really miss something with the transmission of state within props of sub components in React.

I have implemented a version of a todo l

Answer 1

The problem is from Array.push return the number of elements in the array and not the updated array

addTask(task) {
  this.setState({
    tasks: this.state.tasks.push(task)
  })
}

To fix this you can push to state.tasks then setState with it later on:

addTask(task) {
  this.state.tasks.push(task);
  this.setState({
    tasks: this.state.tasks
  })
}

This way you set state.task to the updated array.

Answer 2

The problem is in how you add a task in the App’s state.

addTask(task) {
    this.setState({
        tasks: this.state.tasks.push(task)
    })
}

See, Array.prototype.push returns the length of the array after adding an element. What you really want is probably Array.prototype.concat.

addTask(task) {
    this.setState({
        tasks: this.state.tasks.concat([ task ])
    })
}

Also, thanks to @t-j-crowder pointers and as also reported by @mayank-shukla, you should use a different approach to mutate your state:

addTask(task) {
    this.setState(function (state) {
        return {
            tasks: state.tasks.concat([ task ])
        }
    });
}

Or using ES2015 Arrows, Object destructuring and Array spread:

addTask(task) {
    this.setState(({ tasks }) => ({
        tasks: [ ...tasks, task ]
    }));
}

Since Component.prototype.setState can be asynchronous, passing a function to it will guarantee the new state values depend on the right, current previous values.

This means that if two or more setState calls happen one after another you are this way sure that the result of the first one will be kept by applying the second.

Answer 3

As per MDN DOC:

The push() method adds one or more elements to the end of an array and returns the new length of the array.

Array.push never returns the result array, it returns the number, so after adding the first task, this.state.tasks becomes a number, and it is throwing the error when you trying to run map on number.

You did the mistake here:

addTask(task) {
    this.setState({
        tasks: this.state.tasks.push(task)
    })
}

Write it like this:

addTask(task) {
    this.setState( prevState => ({
        tasks: [...prevState.tasks, task]
    }))
}

Another import thing here is, the new state will be depend on the previous state value, so instead of using this.state inside setState, use updater function.

Explanation about Edit part:

Two important things are happening there:

1- setState is async so just after setState we can expect the updated state value.

Check this for more details about async behaviour of setState.

2- Array.push always mutate the original array by pushing the item into that, so you are directly mutating the state value by this.state.tasks.push().

---

Check the DOC for more details about setState.

Check the MDN Doc for spread operator (...).

Check this snippet:

let a = [1,2,3,4];

let b = a.push(5);  //it will be a number

console.log('a = ', a);

console.log('b = ', b);

Answer 4

As the other answers stated, the Array push method does not return the array. Just to complement the answers above, if you are using ES6, a nice and elegant way of doing this is using the spread operator (you can read more about it here)

this.setState({
    tasks: [...this.state.tasks, task]
})

It is essentially the same as using the concat method, but I think this has a nicer readability.