title: React: Losing ref values
body: <p>I am using two components and I am using this pattern: child component should stay isolated as much it can - it is handling its own validation error. Parent component should check for errors which have dependencies between children. So, in my case: <code>password</code> field and <code>password confirmation</code> field.</p>
  
  <p>Here is my code:</p>
  
  <p><strong>a) SignUp (parent)</strong></p>
  
  <p>Setting initial state.</p>
  
  <pre><code> constructor() {
       super();
  
       this.state = {
           isPasswordMatching: false
       };
   }
  </code></pre>
  
  <p>In <code>render()</code> method I am outputting my child component. Through prop called <code>callback</code> I am propagating method <code>isPasswordMatching()</code> by binding parent's <code>this</code>. The goal is that method can be called within child component.</p>
  
  <pre><code>&lt;TextInput
      id={'password'}
      ref={(ref) =&gt; this.password = ref}
      callback={this.isPasswordMatching.bind(this)}
      // some other unimportant props
  /&gt;
  
  &lt;TextInput
      id={'passwordConfirm'}
      ref={(ref) =&gt; this.passwordConfirm = ref}
      ...
  </code></pre>
  
  <p><code>isPasswordMatching()</code> method is checking if passwords match (through refs <code>this.password</code> and <code>this.passwordConfirm</code>) and then updates state. Please note that this method is called inside child (password or passwordConfirm).</p>
  
  <pre><code>isPasswordMatching() {
      this.setState({
          isPasswordMatching: this.password.state.value === this.passwordConfirm.state.value
      });
  }
  </code></pre>
  
  <p><strong>b) TextInput (child)</strong></p>
  
  <p>Setting initial state.</p>
  
  <pre><code>constructor() {
      super();
  
      this.state = {
          value: '',
          isValid: false
      };
  }
  </code></pre>
  
  <p>On blur validation is done and state is updated.</p>
  
  <pre><code>onBlur(event) {
  
      // doing validation and preparing error messages
  
      this.setState({
          value: value,
          isValid: this.error === null
      });
  }
  </code></pre>
  
  <p>Latest. Callback prop is called.</p>
  
  <pre><code>componentDidUpdate(prevProps) {
      if (prevProps.id === 'password' || prevProps.id === 'passwordConfirm') {
          prevProps.callback();
      }
  }
  </code></pre>
  
  <p><strong>Issue</strong></p>
  
  <p>Somehow my refs are lost. Scenario:</p>
  
  <ol>
  <li>Parent component is renderder</li>
  <li>Child components are rendered</li>
  <li>I am entering one of input fields and get out (this invokes <code>onBlur()</code> method) - state gets updated, child component is rendered</li>
  <li><code>componentDidUpdate()</code> is invoked and <code>prevProp.callback()</code> as well</li>
  <li>When going to <code>isPasswordMatching()</code> method I am outputting <code>this.password</code> and <code>this.passwordConfirm</code> - they are objects with expected values of reference. Updating state of parent - component gets rendered.</li>
  <li>Then again all children are rendered, components get updated, callback is called but this time <code>this.password</code> and <code>this.passwordConfirm</code> are <code>null</code>.</li>
  </ol>
  
  <p>I have no idea why references are kinda lost. Should I be doing something differently?
  Thank you in advance.</p>