problem description

in componentDidMount, document.getElementById ("id") is null

the environmental background of the problems and what methods you have tried

I try to use ref, to find undefined. in this.refs

related codes

componentDidMount() {
    const fullscreenBtn = document.getElementById("button");
    if (fullscreenBtn) {
      fullscreenBtn.addEventListener("click", () => {
        if (fullscreenBtn.requestFullscreen) {
          fullscreenBtn.requestFullscreen();
        } else if ( document.getElementById("video").msRequestFullscreen) {
          fullscreenBtn.msRequestFullscreen();
        } else if ( document.getElementById("video").mozRequestFullScreen) {
          fullscreenBtn.mozRequestFullScreen();
        } else if ( document.getElementById("video").webkitRequestFullscreen) {
          document.getElementById("video").webkitRequestFullscreen();
        }
      });  
}
}
<div 
  className = "play_img" 
  id="button"
  ref="button" 
  ref={(ref) => this.button = ref}
  onClick={handleClick}>
  <img src={require("./assets/play.png")}  />
</div>