# Proper way based on official guidelines
The answers here are a bit dated and require `useEffect` with side effects or other brittle approaches. There is no need for any of that. According to the official guidance, you can use ["ref callbacks"][1].
React will call your ref callback with the DOM node when it’s time to set the ref, and with `null` when it’s time to clear it. This lets you maintain your own array or a `Map`, and access any ref by its index or some kind of ID. e.g:
``` import { useRef } from "react";
const data = [{ id: 1, text: 'test1' },{ id: 2, text: 'test2' } ]
const Component = () => { const refs = useRef(new Map());
return ( <div> {data.map((item) => ( <div key={item.id} ref={el => el ? refs.current.set(item.id, el) : refs.current.delete(item.id)}> {item.text} </div> ))} </div> ); }; ```
If your array doesn't have a natural ID, you can always fall back to the good ol' index with similar caveats as using it in other places for a key.

[1]: https://react.dev/reference/react-dom/components/common#ref-callback

There is no need for `useEffect` with side effects or other brittle approaches. According to the official guidance, you can use ["ref callbacks"][1].
React will call your ref callback with the DOM node when it’s time to set the ref, and with `null` when it’s time to clear it. This lets you maintain your own array or a `Map`, and access any ref by its index or some kind of ID. e.g:
``` import { useRef } from "react";
const data = [{ id: 1, text: 'test1' },{ id: 2, text: 'test2' } ]
const Component = () => { const refs = useRef(new Map());
return ( <div> {data.map((item) => ( <div key={item.id} ref={el => el ? refs.current.set(item.id, el) : refs.current.delete(item.id)}> {item.text} </div> ))} </div> ); }; ```
If your array doesn't have a natural ID, you can always fall back to the good ol' index with similar caveats as using it in other places for a key.

[1]: https://react.dev/reference/react-dom/components/common#ref-callback