How to deal with a ref within a loop?

Question

Below is my parent component with multiple inputs from a loop. How can I choose one input to focus? Do I have to create a dynamic ref in this case?

Answer 1

I discovered another way of tackling this:

let dataCount = 0;

class TestRef extends React.Component {
  state = {
    data: [
      {
        name: "abc"
      },
      { name: "def" }
    ]
  };
  focusInput = (thisHello) => this[`ref${thisHello}`].current.focus();
  render() {
    return (
      

        {this.state.data.map(o => {
          dataCount++
          return  { this[`ref${dataCount}`] = el; }} />;
        })}
         this.focusInput(1)}>focus input 1
         this.focusInput(2)}>focus input 2
      
    );
  }
}

The dataCount is unnecessary if your Hello element has a key or unique ID to use as a variable.