how to select clicked element in reactjs? - reactjs

Question

I am new to reactjs in this i have defined components and i am passing title to audio cards and by using title i am also defining source of the audio files. and after clicking on that particular component i want to play that particular audio file.
in js we can achieve this using $(this).find();
but in reactjs how to do it can anyone help me
import React from 'react';
import AudioCard from './AudioCard';
import '../css/RecommendedAudios.css';
function RecommandedAudios() {
return (
<div className="recommandedaudios">
<h2>Recommanded</h2>
<div className="recommandedaudios_audios">
<AudioCard title="Arrows to Athens - Alive" />
<AudioCard title="Arrows to Athens - Dust & Gold" />
<AudioCard title="Arrows to Athens - Stars" />
<AudioCard title="Arrows to Athens - Used to be" />
<AudioCard title="Bryan Adams - Here I am" />
<AudioCard title="My Heart Belongs to You" />
<AudioCard title="Ravenscode - My Escape" />
</div>
</div>
);
}
export default RecommandedAudios;
import React from 'react';
import '../css/AudioCard.css';
import PlayArrowIcon from '#material-ui/icons/PlayArrow';
function AudioCard({ title, timestamp }) {
var playsong = () => {
const select = document.querySelector("audio");
select.play();
};
return (
<div onClick={playsong} className="audiocard">
<PlayArrowIcon />
<div className="audiocard_info">
<div className="audiocard_title">
<h5>{title}</h5>
<audio src={require(`../sounds/${title}.mp3`)}></audio>
</div>
</div>
</div>
);
}
export default AudioCard;

Answer 1

document.querySelector("audio") will return the first "audio" tag in the HTML, not the specific one you're looking for
you can use ref:
import React, { useRef } from 'react'
function AudioCard({ title, timestamp }) {
const audioEl = useRef(null);
const playsong = () => audioEl.current.play();
return (
<div onClick={playsong} className="audiocard">
<PlayArrowIcon />
<div className="audiocard_info">
<div className="audiocard_title">
<h5>{title}</h5>
<audio ref={audioEl} src={require(`../sounds/${title}.mp3`)}></audio>
</div>
</div>
</div>
);
}

Answer 2

You can use react-audio-player instead of using query selector and HTML audio tag
you can install it by
npm install --save react-audio-player
and inport the library to your code and use
import ReactAudioPlayer from 'react-audio-player';
const [audio,ReferAudio] = useState()
...........
<div onClick={playsong} className="audiocard">
<PlayArrowIcon />
<div className="audiocard_info">
<div className="audiocard_title">
<h5>{title}</h5>
<ReactAudioPlayer
src={require(`../sounds/${title}.mp3`)}
controls
ref={(e) => { ReferAudio(e) }}
/>
</div>
</div>
</div>
you can access the player by using audio
you can lern more here