title: What the difference of this.state and this.setstate in ReactJS?
body: <p>I want to change the value for the <code>hasSubmit</code> key, like in the First Code section. I know this is not recommended. But the second code is asynchronous and I don't want to use the callback function of <code>setState</code>.</p>
  
  <ul>
  <li>What is the difference of <code>this.state</code> and <code>setState</code>?</li>
  <li>Is there any way to change state value <code>hasSubmit</code> immediately?</li>
  </ul>
  
  <blockquote>
    <p>First Code:</p>
  </blockquote>
  
  <pre><code>this.state.hasSubmit = false
  this.setState({})
  //Code that will use `hasSubmit`.
  </code></pre>
  
  <blockquote>
    <p>Second code:</p>
  </blockquote>
  
  <pre><code>this.setState({
     hasSubmit: false,
  });
  //Code that will use `hasSubmit`.
  </code></pre>
  
  <hr>
  
  <p><strong>ADD:</strong></p>
  
  <p>The scenario is that:</p>
  
  <blockquote>
    <ol>
    <li><code>hasSubmit</code> set <code>false</code> in <code>getInitialState()</code>.</li>
    <li><code>hasSubmit</code> will change to <code>false</code> when I click <code>submit</code> button.</li>
    <li><code>hasSubmit</code> will change to <code>true</code> when submitted.</li>
    </ol>
  </blockquote>
  
  <p>First click <code>submit</code> has no problem and <code>hasSubmit</code> will be set to <code>true</code>.</p>
  
  <p>But second click <code>submit</code> will be wrong using the <code>Second asynchronous code</code>, because the <code>hasSubmit</code> is still <code>true</code>, while the <code>First Code</code> can resolve the problem.</p>