How to access all the DOM element in React that got rendered through map?

Question

return <div>
        <div >{'Audios'}</div>
        {urls.map(url => <div >
            <audio controls src={url} />
        </div>)}
    </div>;

I want the reference of all the audio tags.

We generally use ref={} for a single DOM element.

How can I use ref for all the elements of a map?

score 0 · Answer 1 · answered Aug 29 '22 at 03:42

Depending on performance concerns if your lists are very large, you could use an id on the element and a DOM query to select it. Personally I would prefer to have a more specific ID, than an array index, incase of edge cases like reordering the list. Usually it's best to reference something that is in the data.

So if we have a list of URLs (['google.com', 'amazon.com', 'microsoft.com']), then we can update that to store an id as well. This should be done when you go to store the data, not in the render of a React Component.

urls: [{url: 'google.com', id: 1}, {url: 'amazon.com', id: 2}, {url: 'microsoft.com', id: 3}]

Now ideally you would have something like uuid() or a helper that uses a timestamp or something better than this example when generating an ID, but it is an example :)

With this in mind let's render things a little differently.

return (
  <div>
    <div>Audios</div>
    {urls.map(({url, id}) => (
      <div>
        <audio controls src={url} id={`audio-${id}`} />
      </div>
    ))}
  </div>
);

if you ever need to access one of these elements, lets say on a user click: onClick={handleClick(id)}

handleClick = (id) => (e) => {
  const elem = document.getElementById(`audio-${id}`)
  // do something with the audio element
}

How to access all the DOM element in React that got rendered through map?

1 Answers1