title: What's the proper way of passing a ref to a prop?
body: <p>I'm trying to pass a ref of a component to another component. Since <a href="https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs" rel="noreferrer">string refs are being deprecated</a> I'm using callback refs.</p>
  <p>So I have something similar to this:</p>
  <pre><code>&lt;One ref={c =&gt; this.one = c}/&gt;
  &lt;Two one={this.one}/&gt;
  </code></pre>
  <p>The problem is that whenever I try to access <code>this.props.one</code> inside <code>Two</code> I get <code>undefined</code>.</p>
  <p>I have even tried this on <code>Two</code>:</p>
  <pre><code>componentDidMount(){
      setTimeout(()=&gt;{
          console.log(this.props.one);
      },5000)
  }
  </code></pre>
  <p>It seems the problem is that when the prop is created, the ref doesn't exist yet since it's created once <code>One</code> is mounted. But I don't know how to &quot;refresh&quot; the props on <code>Two</code> to get the ref to the mounted component.</p>
  <p>So what's the proper way of passing a ref to another component?</p>
  <p><strong>Edit</strong></p>
  <p>Some users have suggested to encapsulate that logic in a higher component, which in itself renders those other child components.</p>
  <p>The problem with that approach is that you can't create reusable logic and you have to repeat the same logic over and over in those encapsulating components.</p>
  <p>Let's say you want to create a generic <code>&lt;Form&gt;</code> component which encapsulates the submit logic to your store, error checking, etc. And you do something like this:</p>
  <pre><code>&lt;Form&gt;
      &lt;Input/&gt;
      &lt;Input/&gt;
      &lt;Input/&gt;
      &lt;Input/&gt;
      &lt;SubmitButton/&gt; 
  &lt;/Form&gt;
  </code></pre>
  <p>In this example <code>&lt;Form&gt;</code> can't access the instances (and methods) of the children since <code>this.props.children</code> doesn't return those instances. It returns some list of pseudo components.</p>
  <p>So how can you check if a certain <code>&lt;Input/&gt;</code> has detected a validation error without passing a ref?</p>
  <p>You have to encapsulate those components in another component with the validation logic. For example in <code>&lt;UserForm&gt;</code>. But since each form is different the same logic has to be copied in <code>&lt;CategoryForm&gt;</code>, <code>&lt;GoupForm&gt;</code>, etc. This is terribly inefficient which is why I want to encapsulate the validation logic in <code>&lt;Form&gt;</code> and pass references of the <code>&lt;Input&gt;</code> components to <code>&lt;Form&gt;</code>.</p>