ReactJS - push json into state array

Question

I'm simply trying to append a json created dynamically into an array that lives inside the state. The only way that I've found till now is to use concat, because push doesn't work.

    constructor() {
        super()
        this.state = {
            list: []
        }
        this.add = this.add.bind(this)
    }

    add(e) {
        e.preventDefault()
        var task = document.getElementById('task').value
        var json = JSON.parse(JSON.stringify({key: task, item: task}))
        this.setState({list: this.state.list.concat(json)}) // WORKS
        // this.setState({list: this.state.list.push(json)}) // DOESN'T WORK

        console.log(this.state.list)
        document.getElementById('task').value = ''

    }

That works, but I don't understand why I have an empty array in console after the first item it's created. I've read how concat works, but obviously I missed something. Why I can't push an object inside my this.list array?

Tony Dinh · Accepted Answer · 2015-12-20 18:58:10Z

6

The concat otherwise create a new array and return it.

The push returns the new length of the array, which means a number, which means NOT what you want to set to state.list. That's why it didn't work.

why I have an empty array in console

From the docs: setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value. That's why you are getting the empty array in the console.

And one more thing, don't mutate your state directly. If you call state.list.push(...), your changes will not be maintained by React and will be discarded if you call setState later. So it's a good thing to use concat.

edited Dec 20, 2015 at 18:58

answered Dec 20, 2015 at 18:18

Tony Dinh

6,7265 gold badges42 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Luca Mormile Over a year ago

Right, but do you know why I have an empty array in console after I create the first element? I expected to see the element I've just created

Tony Dinh Over a year ago

From the docs: facebook.github.io/react/docs/component-api.html#setstate: setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value. That's why you are getting the empty array in the console. In another words, setState run asynchronously.

Luca Mormile Over a year ago

I'm wondering if my code could be a good approach or exists a better/cleaner way to append data into an array

Tony Dinh Over a year ago

Tips: don't use document.getElementById, use state and props. You might want to read this article to clearly know how to work in React: facebook.github.io/react/docs/thinking-in-react.html

Fareed Alnamrouti Over a year ago

the answer is totally misleading the problem is not what array.push return the problem is about mutation so react can know the difference between the state previous and current state changes also this.setState accept a callback function that can be used to know if the state change process is finished.

|

Naisheel Verdhan · Accepted Answer · 2015-12-20 18:15:45Z

this.state is immutable and has to be changed only via the setState() function.

From the docs:

NEVER mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable. setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value.

So, the best way to do this is to replace the array in this.state by a new array, and not try to push/modify it.

var newState = Object.assign({}, this.state); // Clone the state obj in newState
newState[arrayKey].push(newItem);             // modify newState
this.setState(newState);                      // setState()

demux · Accepted Answer · 2015-12-20 18:18:32Z

0

Array.prototype.push() returns the new length property of the object upon which the method was called.

See: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/push#Returns

answered Dec 20, 2015 at 18:18

demux

4,6742 gold badges36 silver badges59 bronze badges

1 Comment

demux Over a year ago

Damn, TrungDQ beat me to it :)

Collectives™ on Stack Overflow

ReactJS - push json into state array

3 Answers 3

6 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related