What is the correct way of setting state variables in Reactjs and what is the difference between these approaches? -

i working react js , wondering difference between calling setstate() twice set 2 different state variables this:

this.setstate({fruit1: “apple”}); this.setstate({fruit2: “mango”}); 

and

calling setstate() once , passing both state variables json this:

this.setstate({fruit1: “apple”, fruit2: “mango”}); 

also better practice: putting state variable names in double quotes this: this.setstate({"fruit1": “apple”}) or ignoring quotes?

inside react event handler (that is, function called react-based onchange={...} property , like), multiple calls setstate batched , component re-rendered single time. so, there's no difference between

handleclick: function() {   this.setstate({fruit1: "apple"});   this.setstate({fruit2: "mango"}); } 

and

handleclick: function() {   this.setstate({fruit1: "apple", fruit2: "mango"}); } 

however, outside of react event system, 2 calls setstate not merged unless wrap them in function passed react.addons.batchedupdates. not have worry about, may become issue if start setting state in response asynchronous events (e.g. timers, promises, callbacks, etc). reason, recommend second form (with 2 objects merged one) on first.