title: React js variable in render stays undefined
body: <p>I have two functions as follows : </p>
  
  <pre><code>handleChangeInputStockName = async event =&gt; {
          const stockName = event.target.value
  
          this.setState({ stockName })
      }
  
  handleChangeInputTotalQuantity = async event =&gt; {
          const totalQuantity = event.target.value
  
          this.setState({ totalQuantity })
      }
  
  </code></pre>
  
  <p>I have two components that control the above two functions </p>
  
  <pre><code>&lt;InputText
   type="text"
   value={ totalQuantity }
   onChange={this.handleChangeInputTotalQuantity}
   /&gt;
  </code></pre>
  
  <p>and </p>
  
  <pre><code>&lt;InputText
   type="text"
   value={ stockName }
   onChange={this.handleChangeInputStockName}
  /&gt;
  
  </code></pre>
  
  <p>In my render function both stockName and totalQuantity are always undefined, even though I can see changes being made to them in the InputText via the above two functions. I am able to see a state change however it goes back to undefined immediately. The render function is as follows : </p>
  
  <pre><code>
  render() {
  
          var { stockName, totalQuantity, show, close, children } = this.state
  
          console.log('stockName ====&gt; ', stockName)           //undefined
          console.log('totalQuantity ====&gt; ', totalQuantity)   //also undefined
  ...
  
  </code></pre>
  
  <p>What am I doing wrong? Please help me out here. Thank you.</p>
  
  <p>Here's a link to the sandbox for the Modal to which this code belongs. 
  <a href="https://codesandbox.io/s/divine-bush-rquid" rel="nofollow noreferrer">https://codesandbox.io/s/divine-bush-rquid</a></p>