How to use this.refs for a list of child components [duplicate]

Question

I have a list of <Child /> component, then I used an array this.state.infos to generate these child components. How can I use this.refs to get a specific child component?

NOTE: this.state.infos = ['tom', 'mike', 'julie']; for example.

export default class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      infos: {},
    };
  }

  // ignore logic for this.state.infos
  // ...

  render() {
    return (
        <div>
          {[...this.state.infos].map((info) => {
            return <Child
              ref={info}
            />
          })}
        </div>
    );
  }
}

Answer 1

For your approach, simply write

this.refs.tom
this.refs.julia

etc...

But note that this is considered legacy API, and you shouldn't use this any more.
A better way is

 refsCollection = {};
 render() {
    return (
        <div>
          {[...this.state.infos].map((info) => {
            return <Child
              ref={(instance)=>{this.refsCollection[info] = instance;}
            />
          })}
        </div>
    );
  }

React supports a special attribute that you can attach to any component. The ref attribute takes a callback function, and the callback will be executed immediately after the component is mounted or unmounted.

The callback receives the child DOM element as the parameter, which you can then assign to a property in your parent component object. In the code above, notice how we assigned "instance" to "this.refsCollection[info]"

Of course in your case, because you defined the Child component yourself, it's not really a standard html DOM element, so the callback parameter is actually a mounted instance of your Child component object.

And then you access the mounted component instances using:

this.refsArray['tom']
this.refsArray['julia']

For more information, see this link: https://reactjs.org/docs/refs-and-the-dom.html