How to create dynamic refs in functional component- Using useRef Hook

Question

I want to have refs in functional components which have elements dynamically rendered.

Please help me in creating Dynamic Refs using the useRef Hook and accessing it in the handler.

1. Need to create 3 useRefs to point to 3 buttons.

2. Access them in the button handler using "ref1.value" Or "ref2.value" etc.

let abc=[1,2,3];
function submitclick(){
    alert(123);
}

// Here I want to access the buttons using the refs
return ( <div>
  {  abc.map(function(index){ return (<button ref='123' onClick={submitclick}>{`Button${index}`}</button>)})}
    </div>);
};

ReactDOM.render(<MyComponent name="doug" />, document.getElementById('root'));```

Answer 1

refs are basically objects, and they have a default key current. So, you can create an array of refs like this:

const myRefs= useRef([]);

Then you can populate this array of refs like this:

ref={el => (myRefs.current[i] = el)}

---

Here is the full version:

{
  [1, 2, 3].map((v, i) => {
    return (
      <button
        ref={(el) => (myRefs.current[i] = el)}
        id={i}
        onClick={submitClick}
      >{`Button${i}`}</button>
    );
  });
}