React.js setState of objects property from array

Question

Right now i need to increment/decrement a property value of state's array of objects. I have tried throwing everything that came to my mind to setState. At times it didnt throw any errors, but wasn't updating the value either Right now i get error message:

this.state.products[key] is undefined

constructor(props) {

    super(props)

    var products = [
        { name: "Motorhead glasses", price: 300, amount: 1 },
        { name: "Judaspriest glasses", price: 499, amount: 1 }
    ]

    this.state = { products: products }
    this.handleMinus = this.handleMinus.bind(this)

}


handleMinus(key) {
    var stateCopy = Object.assign({}, this.state);
    stateCopy.products = stateCopy.products.slice();
    stateCopy.products[key] = Object.assign({}, stateCopy.products[key]);
    stateCopy.products[key].amount += 1;
    this.setState({ [this.state.products[key].amount]: stateCopy });
    console.log(this)
}

how did you implement handleMinus in your code? you need to provide that code as well. — Ruhul Amin
– Ruhul Amin, Commented May 16, 2017 at 9:32
@RuhulAmin it is implemented but i wont be pasting the whole markup. It works on click, i have fixed context and console.log this works fine — EDGECRUSHER
– EDGECRUSHER, Commented May 16, 2017 at 9:34
@LeeHanKyeol propably, but it wouldnt might not be in my actual code — EDGECRUSHER
– EDGECRUSHER, Commented May 16, 2017 at 9:36

Community · Accepted Answer · 2017-05-23 12:10:30Z

2

You you clone a state object, you can modify it directly and setback to state

handleMinus(key) {
    var stateCopy = [...this.state.products];   /Create a copy of products array using spread operator syntax.
    stateCopy[key].amount += 1;
    this.setState({products : stateCopy });

}

If you wanna know what [...this.state.products] mean check this answer: What is the meaning of this syntax "{...x}" in Reactjs

edited May 23, 2017 at 12:10

CommunityBot

11 silver badge

answered May 16, 2017 at 9:37

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

Comments

Mayank Shukla · Accepted Answer · 2017-05-16 09:41:18Z

Use this (check the comments):

handleMinus(key) {
    var stateCopy = this.state.products.slice();        //create a copy of products array
    stateCopy[key] = Object.assign({}, stateCopy[key])  //create a copy of object at that key
    stateCopy[key].amount += 1;                         //modify the value
    this.setState({products : stateCopy });             //update the state variable
}

Your code will also work with a small change, change the way you are using setState to update the state value, use this:

handleMinus(key) {
    var stateCopy = Object.assign({}, this.state);
    stateCopy.products = stateCopy.products.slice();
    stateCopy.products[key] = Object.assign({}, stateCopy.products[key]);
    stateCopy.products[key].amount += 1;
    this.setState(stateCopy);   //use this
}

Bertrand Marron · Accepted Answer · 2017-05-16 09:49:45Z

0

You’re making unnecessary shallow copies of your state.

handleMinus(key) {
  const product = this.state.products[key];

  this.setState({
    products: [
      ...this.state.products,

      [key]: Object.assign({}, product, {
        amount: product.amount + 1
      })
    ]
  })
}

answered May 16, 2017 at 9:49

Bertrand Marron

22.3k8 gold badges63 silver badges95 bronze badges

Collectives™ on Stack Overflow

React.js setState of objects property from array

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related