title: React Refs return null or undefined when accessing reference to the DOM node
body: <pre><code>TypeError: Cannot read property 'value' of null
  App._this.check_input_value
  src/App.js:36
    33 | 
    34 | check_input_value = () =&gt; {
    35 | 
  &gt; 36 |     if (this.ref1.current.value != undefined &amp;&amp; this.ref1.current.value != null) {
    37 |         console.log(this.ref1.current.value);
    38 |     }
    39 | }
  </code></pre>
  
  <p>I also tried testing only one condition (both != null, and undefined, separately). Same error except I think when testing for != null only it said property was undefined instead.</p>
  
  <p>The if statement was put in to solve the undefined/null value errors and removing it just produces the same errors on the next statement.</p>
  
  <p>I start with a default value in the input being referenced, so that should not be an issue:</p>
  
  <pre><code>// inside render()
  &lt;form action=""&gt;
        &lt;input
           type="text"
           ref={this.ref1}
           value='10'
           onChange={(e) =&gt; this.update_input_field(e)} /&gt;
        &lt;button
            onClick={this.check_input_value()} &gt;
            Check input value
        &lt;/button&gt;
  
  // Towards the top of the component, outside the constructor:
  ref1 = React.createRef();
  </code></pre>
  
  <p>I also tried setting <code>this.ref1 = React.createRef()</code> inside the constructor. Same error.</p>
  
  <pre><code>constructor(props) {
      super(props);
  
      this.ref1 = React.createRef();
  }
  </code></pre>
  
  <p>Does anyone know why the this.ref1.current returns undefined or null? </p>
  
  <p>Any solutions to the above are also welcome, thanks.</p>