How to create unique refs for elements being rendered via array.map()

create-unique-refs-elements-map.md

You could define a ref, and then inside the object, make multiple subvalues based on the key of the child:

const ref = useRef({})

{array.map((item)=><div key={item.id} ref={ref.current[item.id] ??= { current: null }}>{item.id}</div>)}

Example: https://playcode.io/1096173

Another approach is callback refs:

const ref = useRef({})
  {array.map((item)=><div key={item.id} ref={element => {
    if(element) {
      ref.current[item.id] = element
    } else {
      delete ref.current[item.id]
    }
  }}>{item.id}</div>)}

Example: https://playcode.io/1096186

---

Sources:

• https://www.reddit.com/r/learnreactjs/comments/10jm19n/how_to_create_unique_refs_for_elements_being/