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?

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?

• javascript
• arrays
• json
• reactjs
• ecmascript-6

3 Answers 3

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.

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()

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

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