How could I make two different onClick events into onc

Question

I have defined two different functions to a onClick event separately, how could I make then into one single onClick event. Here is what I have so far:

const playPause = (props) => {
    
    let audio = new Audio(project)
    const start = () => {
      audio.play()  
    }
    const  stop = () => {
           audio.pause()
    }  
    return(
        <div>
        <button onClick={start}>Play</button>
        <button onClick={stop}>Pause</button>        
        </div>
    )
}

I have tried to declare a function that contains this two functions like:

const playThanStop { return stop? start: stop } //so it could return on single:

 <button onClick={playThanStop}>Play/Pause</button>  

but that did not work, any suggestions?

Answer 1

try to use virtual dom it will help you

let song=document.getElementById("ad");
function togglePlayPause()
{
    song.paused ? song.play() : song.pause();
}