title: React ref state is null
body: <p>I want to access the state of a Child component by using refs, but the state of the ref is always null.</p>
  
  <p>In my React app, I have an <code>Editor</code>(basically, it is a form) that manipulates its own states, e.g. value change, update. The editor is used on multiple pages.</p>
  
  <p><strong>Editor.jsx</strong></p>
  
  <pre><code>    export default class Editor extends React.Component {
          constructor(props) {
              super(props);
              this.state = {
                  value1: null,
                  ... other values 
              };
           }
  
           onValue1Change = (e) =&gt; {
              this.setState({value1: e.target.value});
           }
  
           onSave = (e) =&gt; {
              // save values
           }
  
           render() {
               return (
                  &lt;div&gt;
                      &lt;input value={this.state.value1} onChange={this.onValue1Change}/&gt;
                      ... other input fields
                      &lt;button onClick={this.onSave}&gt;Save&lt;/button&gt;
                  &lt;/div&gt;
               )
           }
       }
  </code></pre>
  
  <p>Now, there is a <code>RegisterForm</code> which covers all fields in the Editor. I made a small change in the <code>Editor</code> to hide the Save button so I can use it in the <code>RegisterForm</code>:</p>
  
  <p><strong>RegisterForm.jsx</strong></p>
  
  <pre><code>    export default class RegisterForm extends React.Component {
          constructor(props) {
              super(props);
              this.state = {
                  email: null,
                  firstname: null,
                  lastname: null
              };
              this.Editor = React.createRef();
          }
  
          onSave = (e) =&gt; {
              let childState = this.Editor.current.state;
              // childState is ALWAYS null!
          }
  
          render() {
              return (
                  &lt;div&gt;
                      &lt;input value={this.state.email} onChange={this.onEmailChange}/&gt;
                      &lt;input value={this.state.firstname} onChange={this.onFirstnameChange}/&gt;
                      &lt;input value={this.state.lastname} onChange={this.onLastnameChange}/&gt;
                      ...
                      &lt;Editor ref={this.Editor} showSave={false}/&gt;
                      ...
                      &lt;button onClick={this.onSave}&gt;Save&lt;/button&gt;
                  &lt;/div&gt;
              )
          }
      }
  </code></pre>
  
  <p>Turns out <code>this.Editor.current.state</code> is always null.</p>
  
  <p>I have <strong>two</strong> questions.</p>
  
  <ol>
  <li><p>Why <code>this.Editor.current.state</code> is null? </p></li>
  <li><p>If I want to use props, how should I change my code? E.g. If I let <code>RegisterForm</code> pass props to Editor, I'd imagine something like this:</p></li>
  </ol>
  
  <p><strong>Editor.jsx</strong></p>
  
  <pre><code>    export default class Editor extends React.Component {
           // same constructor
           onValue1Change = (e) =&gt; {
              this.setState({value1: e.target.value}, () =&gt; {
                  if(this.props.onValue1Change) this.props.onValue1Change(e);
              });
           }
           // same render
       }
  </code></pre>
  
  <p><strong>RegisterForm.jsx</strong></p>
  
  <pre><code>     export default class RegisterForm extends React.Component {
          constructor(props) {
              super(props);
              this.state = {
                  email: null,
                  firstname: null,
                  lastname: null,
                  value1: null,
              };
          }
  
          onValue1Change = (e) =&gt; {
              this.setState({value1: e.target.value});
          }
  
          render() {
              return (
                  &lt;div&gt;
                      &lt;Editor showSave={false} onValue1Change={this.onValue1Change}/&gt;
                      ...
                  &lt;/div&gt;
              )
          }
      }
  </code></pre>
  
  <p>does it make the Child component render twice? Any suggestions on how to improve it?</p>