Append array of values to the current array in a state in React JS

Question

I have the state values as

this.state = {
    emp: [
        {id: "1", name: "A"}
        {id: "2", name: "B"}
        {id: "3", name: "B"}
    ]
}

How can I add an array like var arr = {id:"4", name:"D"} to the state emp without removing the current values of array. I just want to append the new array of values to the current state array. Can anyone help?

Answer 1

In modern JavaScript you can use the spread operator:

Add a single item

addItem = item => {
  this.setState({
    emp: [
      ...this.state.emp,
      item 
    ]
  })
}

Add multiple items:

addItems = items => {
  this.setState({
    emp: [
      ...this.state.emp,
      ...items
    ]
  })
}

The spread operator places all the elements in this.state.emp in a new array instance and item gets appended as the last element.

You should not mutate a component's state with other means than setState as your rendered data will get out of sync.