score:4

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


Related Query

More Query from same tag