title: Button Content Not Updating
body: <p>Style-1
  Please Check both styles</p>
  <pre><code>import React, { Component, createRef } from 'react'
  class Click extends Component {
  
      buttonRef = createRef();
      updatedValue = 0;
  
      clickCounter = () =&gt; {
          this.updatedValue = this.buttonRef.current.value++;
          console.log(&quot;upDatedValue outside of render() method= &quot;+ this.updatedValue)
          }
  
      render() {
          console.log(&quot;upDatedValue inside of render() method= &quot;+ this.updatedValue);
          return (
              &lt;div&gt;
                  &lt;button ref={this.buttonRef} onClick={this.clickCounter}&gt;
                      Clicked {this.updatedValue} Times&lt;/button&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default Click
  </code></pre>
  <p>Style-2</p>
  <pre><code>import React, { Component, createRef } from 'react'
  
  class Click extends Component {
  
      buttonRef = createRef();
      updatedValue = 0;
  
      render() {
          let clickCounter = () =&gt; {
          this.updatedValue = this.buttonRef.current.value++;
          console.log(&quot;upDatedValue inside of cliclCounter() method= &quot;+ this.updatedValue);
          
          }
          console.log(&quot;upDatedValue inside of render() method= &quot;+ this.updatedValue);
          return (
              &lt;div&gt;
                  &lt;button ref={this.buttonRef} onClick={clickCounter}&gt;
                      Clicked {this.updatedValue} Times&lt;/button&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default Click
  </code></pre>
  <p>None of these approach is not working. It always show &quot;Clicked 0 Times&quot;
  Can anyone please explain why this is not working and what the solution is.
  Thank you.
  -Samiul Fahad</p>