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.

Need to create 3 useRefs to point to 3 buttons.
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'));```

What did you try? Do you read the docs? – Dennis Vash Sep 05 '19 at 17:31 — Dennis Vash, Sep 05 '19 at 17:31
why do you need `useRef` here in the first place? – skyboyer Sep 05 '19 at 17:33 — skyboyer, Sep 05 '19 at 17:33

score 85 · Accepted Answer · edited May 21 '23 at 16:14

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>
    );
  });
}

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

1 Answers1

Linked

Related