ReactJS TypeError: Cannot set property 'innerHTML' of null even though it's been defined

In App.js

<Router>       <Confirmation path="/confirmation/:token" />  </Router>  

In Confirmation.js

function Confirmation(props) {    const verificationMessage = document.getElementById("verification-message");    const token = props.token;    // console.log(token);      fetch(`/api/confirmation/${token}`)      .then((res) => res.json())      .then((data) => {        // console.log(data.status);        if (data.status === "alreadyVerified") {          verificationMessage.innerHTML = "You have already been verified!";        } else {          console.log("already verified");        }      });      return (      <div className="confirmation">        <h5>          <span id="verification-message">You have been successfully verified!</span> Please navigate          back to{" "}          <Link to="/login" style={link_style}>            <span className="confirmation__toLogin">login page</span>          </Link>{" "}          to sign on!        </h5>      </div>    );  }  

Even though verificationMessage has been defined, it has a value of null when trying to insert the message into HTML.

Error message: Uncaught (in promise) TypeError: Cannot set property 'innerHTML' of null

How can I fix this?

https://stackoverflow.com/questions/65757173/reactjs-typeerror-cannot-set-property-innerhtml-of-null-even-though-its-been January 17, 2021 at 11:53AM