title: "Good" way how to update state (from its previous value) in React
body: <h3>From react doc</h3>
  <p>From the documentation (<a href="https://reactjs.org/docs/handling-events.html" rel="nofollow noreferrer">https://reactjs.org/docs/handling-events.html</a>) I could see handling of on-off button changes by arrow function like:</p>
  <pre><code>handleClick() {
    this.setState(prevState =&gt; ({
      isToggleOn: !prevState.isToggleOn
    }));
  }
  </code></pre>
  <p>Important thing in here (for me) is, that the <strong>new state value is derived from its previous state value</strong>.
  If I am right, the behaviour is the same as (without arrow function):</p>
  <pre><code>handleClick() {     
      this.setState(function (prevState){
        return {isToggleOn: !prevState.isToggleOn}
      });
  }
  </code></pre>
  <p>or even without function at all:</p>
  <pre><code>handleClick() {
    this.setState({isToggleOn: this.state.isToggleOn ? 
      false : true});
  }
  </code></pre>
  <p><strong>1) Are there any differences in these except the code-style?</strong>
  All approaches seems to work for me and I could not find any difference (except readability).</p>
  <p><strong>2) I thought, this.setState is only &quot;setter&quot;, how the &quot;prevState&quot; can be passed into that function?</strong></p>
  <p><strong>3) Is it mistake to write the code like this (3th approach)?</strong> I became from &quot;old-school&quot; and I did not develop for more than 5 years, now I am returning to dev slowly. The first one example is hardly understandable for me (because of arrow functions and anonymous function), second one is clearer a little bit but the last one is the most self-explaining to me.</p>
  <hr />
  <h3>Real life example</h3>
  <p>&quot;Real learn (life)&quot; example what I am struggling right now:
  As I am learning, I am trying to write my own calculator (starting with only basic functionality). Because of bad &quot;design&quot; (I found out it will be much better to use some array, fields, lists instead of only &quot;variableA, variableB&quot;, but never the less..).
  My app structure is:</p>
  <ul>
  <li>Calculator
  <ul>
  <li>ResultHeader
  <ul>
  <li>Input (for result)</li>
  <li>Input (for printing the equation)</li>
  </ul>
  </li>
  <li>CalcButton (0)
  <ul>
  <li>Button</li>
  </ul>
  </li>
  <li>...</li>
  <li>CalcButton (X)
  <ul>
  <li>Button</li>
  </ul>
  </li>
  </ul>
  </li>
  </ul>
  <p>CalcButton contains props for its value ([0...9], x, /, +, -, C, ...) and event handlers (numberClick, operatorClick). When number button is pressed, it lifts its state to Calculator, which adds the number to valueA or valueB, depends on the state of &quot;isFirst&quot;. operatorClick contains switch for its own functionality and if x, /, +, - was pressed, it sets isFirst on false and user can continue with second number (valueB). Now the code of this handler:</p>
  <pre><code>onNumberClick(e) {
      function appendA() {
          return {valueA: this.state.valueA + e};
      }
  
      function appendB() {
          return {valueB: this.state.valueB + e};
      }
  
      this.setState(this.state.isFirst ? appendA : appendB);
  
      /*
      if(this.state.isFirst) { 
          this.setState({valueA: this.state.valueA + e});
      } else {
          this.setState({valueB: this.state.valueB + e});
      }
      */
  }
  </code></pre>
  <p>Commented code is basically the same as 3th example, even the uncommented variant, only with some &quot;readability&quot; improvements. Last 2 days I am stuck if there is any possibility to use some anonymous arrow function so I do not need to duplicate the code (one time for valueA, one time for valueB). Because of javascript and its lack of object referencing, the only solution I was able to figure was to pass the argument via string (&quot;valueA&quot; || &quot;valueB&quot;) but I think it is not nice solution. The important thing in here is (as in the example at the top), the <strong>new state value is derived from its previous value</strong> (that is why I am still thinking about using arrow anonymous function).</p>
  <p>Can somebody show me some examples how to achieve that? Is arrow function necessary in here (is it even possible to do this by arrow function?) or is this &quot;code&quot; just fine and I am finding problems where there are none?</p>