title: Passing ref down to child in React + Typescript
body: <p>I have an app, where I need to manage focus on the inputs and for that purpose I use React <code>ref</code>.</p>
  
  <p>I have two inputs that I want to move into a separate component. Now they look like following: </p>
  
  <pre><code>&lt;input
    onChange={this.handleChangeOne}
    ref={refOne =&gt; (this.refOne = refOne as HTMLInputElement)}
    type="text"
  /&gt;
  &lt;input
    onChange={this.handleChangeTwo}
    ref={refTwo =&gt; (this.refTwo = refTwo as HTMLInputElement)}
    type="text"
  /&gt;
  </code></pre>
  
  <p>I am having trouble to make the them work in a separate component while it involves passing down ref prop. I've tried something like this:</p>
  
  <pre><code>&lt;InputBlock
  
            handleChangeOne={() =&gt; this.handleChangeOne}
            handleChangeTwo={() =&gt; this.handleChangeTwo}
            refOne=(refOne =&gt; (this.refOne = refOne as HTMLInputElement)}
            refTwo={refTwo =&gt; (this.refTwo = refTwo as HTMLInputElement)}
          /&gt;
  </code></pre>
  
  <p>And the components itself</p>
  
  <pre><code>class InputBlock extends React.Component&lt;IProps&gt; {
    public render() {
      return (
        &lt;React.Fragment&gt;
          &lt;input
            ref={refOne}
            onChange={handleChangeOne}
            type="text"
          /&gt;
          &lt;input
            ref={refTwo}
            onChange={handleChangeTwo}
            type="text"
          /&gt;
        &lt;/React.Fragment&gt;
      );
    }
  }
  
  export default InputBlock;
  </code></pre>
  
  <p>For the sake of example I want <code>handleChangeOne</code> to focus on input two, and <code>handleChangeTwo</code> to focus on input one</p>