When i click the play button, it shows an error saying ' Cannot read property 'play' of null '

Question

When i click the play button, it shows an error saying:

'Cannot read property 'play' of null '

Here is my code:

import React, {useState} from 'react';
import ReactDOM from 'react-dom';

const App = () => {

      const player = document.getElementById('player')
      const [musicIndex, setMusicIndex] = useState(0);
      const musicArray = [
        {
          title: 'koe no katachi',
          link: 'aiko- 恋をしたのはmusic video.mp3'
        },
        {
          title: 'stay alive',
          link: 'ReZero ED Ending 2 FullEmilia (Rie Takahashi) - Stay AliveENG Sub.mp3'
        },
        {
          title: 'Tenshi ni fureta',
          link: '[K-ON AMV] 天使にふれたよ.mp3'
        }
      ]
      
      return (
        <div className="spotify-clone">

          <audio id='player' className='player' src={`Songs/${musicArray[musicIndex].link}`} controls></audio>
          <h3>{musicArray[musicIndex].link}</h3>

          <div className='button'>
          <button onClick={() => setMusicIndex(musicIndex + 1)}>Next</button>
          <button onClick={() => setMusicIndex(musicIndex - 1)}>Prev</button>
          <button onClick={() => player.play()}>Play</button>
          <button onClick={() => player.pause()}>Pause</button>
          </div>
          
        </div>
      );
    }

ReactDOM.render(<App />, document.getElementById('music-player'));

Answer 1

You need to use ref

import React, {useState,useRef} from 'react';
    export const App = () => {
      const playerRef = useRef<HTMLAudioElement>(null);
      const [musicIndex, setMusicIndex] = useState(0);
      const musicArray = [
        {
          title: 'koe no katachi',
          link: 'aiko- 恋をしたのはmusic video.mp3'
        },
        {
          title: 'stay alive',
          link: 'ReZero ED Ending 2 FullEmilia (Rie Takahashi) - Stay AliveENG Sub.mp3'
        },
        {
          title: 'Tenshi ni fureta',
          link: '[K-ON AMV] 天使にふれたよ.mp3'
        }
      ]
      
      return (
        <div className="spotify-clone">
    
          <audio id='player' ref={playerRef} 
          className='player'
           src={`Songs/${musicArray[musicIndex].link}`} controls>
    
           </audio>
          <h3>{musicArray[musicIndex].link}</h3>
    
          <div className='button'>
          <button onClick={() => setMusicIndex(musicIndex + 1)}>Next</button>
          <button onClick={() => setMusicIndex(musicIndex - 1)}>Prev</button>
          <button onClick={() => playerRef?.current?.play()}>Play</button>
          <button onClick={() => playerRef?.current?.pause()}>Pause</button>
          </div>
          
        </div>
      );
    }

Answer 2

You could try maybe initializing the player inline:

<button onClick={() => document.getElementById('player').play()}>Play</button>

I don't know exactly if this helps

Answer 3

You shouldn't use document.getElementById here, as at this point of time the DOM is not yet created. So instead of doing this, you should declare a new variable with useState: const [player, setPlayerValue] = useState('');

and then in useEffect method set the value of player variable with document.getElementById('player').