title: Using useState hooks to update based on the previous state successively
body: <p>I'm trying to enable button if both the checkboxes are checked, I have nonworking <a href="https://stackblitz.com/edit/react-wpfepl" rel="nofollow noreferrer">stackblitz link</a></p>
  
  <p>I have added the only crux of functionality. Please look into the link for the nonworking demo</p>
  
  <pre><code>    import React, { useState } from 'react';
      import { render } from 'react-dom';
  
      function App (){
        const [checked, toggleCheckbox] = useState({ checkbox1: false, checkbox2: false, disabled: true });
        const getDisabled = (state) =&gt; {
           if (state.checkbox1 || state.checkbox2) {
             return false;
           } else if (!state.checkbox1 &amp;&amp; !state.checkbox2) {
             return true;
           } else {
             return true;
           }
         };
         const handleCheckbox = (checkbox) =&gt; {
          toggleCheckbox({
              ...checked,
              [checkbox]: !checked[checkbox],
              disabled: getDisabled(checked)
          });
          console.log(checked);
      };
      const checkDisable = checked.disabled ? 'disabled' : ''
      return (
        &lt;div&gt;
          &lt;div&gt;
             &lt;label&gt;
                 &lt;input
                      type="checkbox"
                      className="filled-in"
                      onChange={() =&gt; handleCheckbox('checkbox1')}
                      checked={checked.checkbox1}
                  /&gt;
                  &lt;span className="black-text"&gt;Checkbox1&lt;/span&gt;
              &lt;/label&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;label&gt;
                  &lt;input
                      type="checkbox"
                      className="filled-in"
                      onChange={() =&gt; handleCheckbox('checkbox2')}
                      checked={checked.checkbox2}
                  /&gt;
                  &lt;span className="black-text"&gt;checkbox2&lt;/span&gt;
              &lt;/label&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;a className={checkDisable} href="#!"&gt;
                  Next Step
              &lt;/a&gt;
          &lt;/div&gt;
     &lt;/div&gt;
    );
  }
  render(&lt;App /&gt;, document.getElementById('root'));
  </code></pre>
  
  <p>The functionality should be as follows:</p>
  
  <ol>
  <li>The button should be enabled only if both the checkboxes are checked</li>
  <li>On unchecking anyone checkboxes it should disable the button</li>
  </ol>