title: How to deal with a ref within a loop?
body: <p>Below is my parent component with multiple inputs from a loop. How can I choose one <code>input</code> to focus? Do I have to create a dynamic <code>ref</code> in this case?</p>
  <pre><code>class TestRef extends React.Component {
    ref = React.createRef();
    state = {
      data: [
        {
          name: &quot;abc&quot;
        },
        { name: &quot;def&quot; }
      ]
    };
    focusInput = () =&gt; this.ref.current.focus();
    render() {
      return (
        &lt;div&gt;
          {this.state.data.map(o =&gt; {
            return &lt;Hello placeholder={o.name} ref={this.ref} /&gt;;
          })}
          &lt;button onClick={this.focusInput}&gt;focus input 1&lt;/button&gt;
          &lt;button onClick={this.focusInput}&gt;focus input 2&lt;/button&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>