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
– Dennis Vash

2019-09-05 17:31:34 +00:00
Commented Sep 5, 2019 at 17:31 — Dennis Vash
– Dennis Vash, Commented Sep 5, 2019 at 17:31
why do you need useRef here in the first place?

skyboyer
– skyboyer

2019-09-05 17:33:16 +00:00
Commented Sep 5, 2019 at 17:33 — skyboyer
– skyboyer, Commented Sep 5, 2019 at 17:33

Jasperan · Accepted Answer · 2023-05-21 16:14:50Z

102

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

edited May 21, 2023 at 16:14

Jasperan

4,9457 gold badges33 silver badges69 bronze badges

answered Sep 5, 2019 at 17:54

user9408899

4,5805 gold badges21 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

refeals Over a year ago

for anyone wondering about the Typescript usage, simply add a ! - ref={(el) => (myRefs.current[i] = el!)}

PhilJay Over a year ago

This works, but could someone please briefly describe what's going on here when passing such a function as ref prop (or add a link to the docs)? Thanks!

Mike Fay Over a year ago

@PhilJay Check out callback refs, and more here: react.dev/reference/react-dom/components/common#ref-callback

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related