how to add a new object as a value to an array in the react state

Question

I would like to add a new value to the array within the react state, but I have encountered errors along the way, could anyone guide me with the solution?

class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          Items: [
            {w:1, b:8, name: 'banana'},
            {w:7, b:3, name:'apple'},
            {w:3, b:5, name:'kiwi'},
            {w:6, b:3, name:'strawberry'},
            {w:5, b:1, name:'orange'}]
        };
      }

    addItem(weight, benefit, itemName){
      this.setState(prevState => ({
        Items: [...prevState.Items, {w:weight, b:benefit, name: itemName}]
      }))
    }

What errors, seems to work fine for me – Shubham Khatri Oct 04 '17 at 07:03 — Shubham Khatri, Oct 04 '17 at 07:03
Please state what errors you encountered in the post. – Dream_Cap Oct 04 '17 at 07:04 — Dream_Cap, Oct 04 '17 at 07:04

score 0 · Accepted Answer · answered Oct 04 '17 at 07:09

You must bind the addItem function in order to use "this" without error.

There are 2 ways:

1/ Lexical binding: (using "=>")

addItem = (weight, benefit, itemName) => {
  this.setState(prevState => ({
    Items: [...prevState.Items, {w:weight, b:benefit, name: itemName}]
  }))
}

2/ Binding in constructor:

  constructor(props) {
    super(props);
    this.state = {
      Items: [
        {w:1, b:8, name: 'banana'},
        {w:7, b:3, name:'apple'},
        {w:3, b:5, name:'kiwi'},
        {w:6, b:3, name:'strawberry'},
        {w:5, b:1, name:'orange'}]
    };
    this.addItem = this.addItem.bind(this);
  }

how to add a new object as a value to an array in the react state

1 Answers1

Linked