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?
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
}
