Can't access classes inside a react-modal - html

Question

This is my first time using react and I am sure that code given is probably not using react's best practices but I am just playing around with it to understand it for now, my problem is that I am trying to access the divs and paragraphs inside the modal but document querySelector returns null. Any ideas? Thanks
moreInfo(movie) {
const movieModalImg = document.querySelector(".movieModalImg");
const movieModalTitle = document.querySelector(".movieModalTitle");
const movieModalRunTimeNum = document.querySelector(
".movieModalRunTimeNum"
);
}
render() {
return (
<div>
<div id="modal">
<Modal
isOpen={this.state.setIsOpen}
onRequestClose={this.closeModal.bind(this)}
contentLabel="Example Modal"
>
<a className="closeModalBtn" onClick={this.closeModal} href={"#"}>
×
</a>
<div className="modal-wrapper">
<div>
<img src={moviePoster} className="movieModalImg" alt=""></img>
</div>
<p className="movieModalTitle"></p>
<div className="movieModalRunTime">
<h4>Runtime:</h4>
<p className="movieModalRunTimeNum"></p>
<p>Minutes</p>
</div>
<div className="movieModalProductionCountry">
<h4>Production Countries:</h4>
<p className="movieModalProductionCountries"></p>
</div>
<div className="movieModalVoteCount">
<h4>Vote Count:</h4>
<p className="movieModalVoteCountNum"></p>
</div>
<div className="movieModalRevenew">
<h4>Revenew:</h4>
<p className="movieModalRevenewNum"></p>
<p>$</p>
</div>
<div className="movieModalBudget">
<h4>Budget:</h4>
<p className="movieModalBudgetNum"></p>
<p>$</p>
</div>
</div>
</Modal>
</div>
<a
href="#"
className="movieCoverMoreInfo"
onClick={this.moreInfo.bind(this)}
>
<img className="moreInfoIcon" src={info} alt=""></img>
More Info
</a>
</div>
);
}