3

I'm learning react and I'm trying to do a call back function to keep my states in sync. I've done the below code which does work and keeps it in sync but I get the

warning "Unexpected user of comma operator no-sequences"

handleInputChange = (value) => {
    this.setState(prevState => ({ amount: prevState.amount = parseInt(value, 0) }, this.handleCalculation()));
}

Any help would be great. Thanks

ravibagul91
  • 20,072
  • 5
  • 36
  • 59
David Foley
  • 35
  • 1
  • 1
  • 4
  • remove `this.handleCalculation()` from `this.setState` – Jacob Nelson Aug 16 '19 at 08:36
  • First of all you are assigning to amount, `prevState.amount` and to `prevState.amout parseInt(value,))`. Why do you do this? What is value? – Nicholas Aug 16 '19 at 08:36
  • Hi guys, sorry i've new. I've been following tutorials that said I need to set the previous state and not mutate the current state directly. I call the code when and input field is changed, and when it is changed I need it to call the function handle calculation. When I put the handle calculation outside on a new line it doesnt keep my state in sync. – David Foley Aug 16 '19 at 08:37
  • What are you doing here `prevState.amount = parseInt(value, 0)`? – ravibagul91 Aug 16 '19 at 08:39
  • Sorry I should of put my whole function, ill edit my post – David Foley Aug 16 '19 at 08:40
  • When I don't do parse int in updates my state to be a string instead of a int. Do i have it all completely wrong? – David Foley Aug 16 '19 at 08:41

2 Answers2

2

You are trying to set amount value. You can simply do this,

this.setState({ amount: parseInt(value)}, () => this.handleCalculation())

Another way is,

this.setState(prevState => ({ 
   ...prevState,
   amount: parseInt(value)
  }), () => this.handleCalculation()
)
ravibagul91
  • 20,072
  • 5
  • 36
  • 59
  • 1
    Thank you, I thought I could not use this.setState directly. I kept reading something about having to set the previous state? Thanks – David Foley Aug 16 '19 at 08:45
  • Thank you for the update, when should I use the prevState method compared to your first solution? I keep getting mixed messages online. Thanks – David Foley Aug 16 '19 at 08:53
  • For more about setState refer this - https://itnext.io/react-setstate-usage-and-gotchas-ac10b4e03d60 – ravibagul91 Aug 16 '19 at 08:54
1

Basicly, your exmample is good. just take off the () from your callback :) because then you send instead of a function, you send the result of your computing function.

 this.setState(()=> ({ amount: parseInt(value, 0) }), this.handleCalculation);

Or send it as an arrow function to keep your scope.

this.setState({ amount: parseInt(value)}, () => this.handleCalculation())

Here is a good explenation about the state lifecycle https://reactjs.org/docs/state-and-lifecycle.html

Here is an example how to use is with callback once done: When to use React setState callback

Gugu
  • 193
  • 1
  • 8
  • `this.setState(prevState => ({ amount: parseInt(value, 0) }, this.handleCalculation));` - This is wrong. – ravibagul91 Aug 16 '19 at 09:00
  • You're right, The ")" is at the end, it should be after setting the object. : this.setState(prevState => ({ amount: parseInt(value, 0) }), this.handleCalculation); – Gugu Aug 16 '19 at 09:04