how to prevent rendering when a modal button is clicked - reactjs

Question

I have a component which displays list of jobs. Clicking on each job will open a modal and displays the details of the job. I have a list of candidates displayed in the modal and when i click a button in the modal, the component re renders and the list of candidates are populated twice. how to prevent that. I have called the props below the render() which should not be done. But don't know where to give.
import { connect } from 'react-redux';
import history from '../history'
import moment from 'moment'
import changeStatus from '../store/actions/changeJobStatus'
class EmpJobcontent extends Component {
constructor(props) {
super(props);
this.sendJobId = this.sendJobId.bind(this);
}
state = {
jobid: '', candidatephoneno: '', statusid: ''
}
getJobId = (event) => {
this.setState({
jobid: event.target.getAttribute('name')
}, () => this.sendJobId())
}
closejob = (event) => {
// this.props.changeStatus(event.target.getAttribute("name"))
// var x = document.getElementById("status");
var x = event.target
if (x.value === "close job") {
x.value = "open job";
x.classList.add("btn-primary");
x.classList.remove("btn-danger");
this.props.changeStatus(event.target.getAttribute("name"))
} else {
x.classList.remove("btn-primary");
x.classList.add("btn-danger");
x.value = "close job";
this.props.changeStatus(event.target.getAttribute("name"))
}
}
individualChat = () => {
// history.push('/individualchat')
}
sendJobId = () => {
this.props.empInfo(this.state.jobid)
}
applyJob = () => {
document.getElementById("applyjob").disabled = true;
const { candidatephoneno } = this.props
this.setState({
candidatephoneno: candidatephoneno, jobid: this.state.jobid
}, () => this.sendApplyJob())
}
sendApplyJob = () => {
this.props.applyJob(this.state)
}
render() {
const { joblists } = this.props
const { appliedCandidates } = this.props
return (
<div className=' d-flex flex-wrap justify-content-center' >
{joblists && joblists.map(joblist => {
return (<div >
<div id='cards' ref="jobid" className="card shadow slidercard ">
<div className="row mt-3 d-flex align-items-center" >
<div className="col-md-3">
<div className="profilepic ml-3"></div>
</div>
<div className="text-left col-md-9 ">
<h6>{joblist.companyName}</h6>
</div>
{/* <div className="col-md-3"><i className="far fa-heart heart_color"></i></div> */}
</div>
<div className="m-3">
<h5 className="font-weight-bold pt-3 text-left" id="jobdescription" data-toggle="modal" data-target={`#${joblist.id}`} name={`${joblist.id}`} >{joblist.Description}</h5>
<h5 className="font-weight-bold pt-3 text-left ">{joblist.RatePerHour}</h5>
<div className="row pt-3" id='cardfooter'>
<div className="col-md-2">
<div><i className="fas fa-map-marker-alt"></i></div>
</div>
<div className="col-md-5">
<h6 className="float-left">{joblist.Location}</h6>
</div>
<div className="col-md-5">
<h6 className="float-right">{moment(joblist.postedon.toDate()).fromNow()}</h6>
</div>
</div>
</div>
</div>
<div className="modal fade show" id={joblist.id} ref="jobid" tabIndex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div className="modal-dialog shadow mw-100 w-75" role="document">
<div className="modal-content">
<div className="modal-header">
<button type='button' className="close" data-dismiss="modal">×</button>
</div>
<div className="modal-body">
<div className="jobdesc">
<div className="row mt-3">
<div className="col-md-2">
<div className="jobdescpic ml-3"></div>
</div>
<div className="col-md-8 dialog_body text-left">
<h6>{joblist.companyName}</h6>
<div>
<h5 className="font-weight-bold pt-3 text-left mb-5">{joblist.Title}</h5>
<div className="row d-flex align-items-center">
<div className="col-md-9">
<div className="row d-flex align-items-center border shadow p-2 font-weight-bold " id='rateperhour'>
<div className="col-md-4 text-center">
<p><i className="far fa-clock"></i>1 hour </p>
</div>
<div className="col-md-4 text-center">
<p>{joblist.RatePerHour}</p>
</div>
{/* <div className="col-md-6 ml-auto">
<button type="submit" id='applyjob' className="cta btn btn-primary" onClick={this.applyJob}>apply job</button>
</div> */}
<div className="col-md-4 text-center">
<p>{joblist.status}</p>
</div>
</div>
</div>
<div className="col-md-3">
<div className="d-flex align-items-start justify-content-end">
<h6>{moment(joblist.postedon.toDate()).fromNow()}</h6>
</div>
</div>
</div>
<p className="mt-5">{joblist.Description}</p>
{/* <img src={documentimg} alt="" /> */}
{/* <a href={joblist.Documents} target='_blank'>{joblist.labeltext}</a> */}
</div>
</div>
<div className="col-md-2" id="popupmenu">
<input type='button' id='status' className={joblist.status === "closed" ? "btn btn-primary" : "btn btn-danger"} onClick={this.closejob.bind(this)} name={joblist.id} value={joblist.status === 'closed' ? 'open job' : "close job"} />
{/* <ul>
<li>
<i className="fas fa-ellipsis-h"></i>
<ul>
<li><Link to={`/appliedcandidates`}>status</Link></li>
</ul>
</li>
</ul> */}
</div>
</div>
</div>
</div>
<div class="modal-footer d-block">
<h4 className="text-center p-3 font-weight-bold text-info">applied candidates</h4>
{appliedCandidates && appliedCandidates.map(appliedCandidate => {
if (joblist.id === appliedCandidate.jobid) {
return (
<div className="row pb-3">
<div className="col-md-4 offset-md-1 text-left font-weight-bold">
<p>{appliedCandidate.firstName}</p>
</div>
<div className="col-md-2">
<button type="button" className="btn btn-success card-btn-width">hire</button>
</div>
<div className="col-md-2">
<button type="button" className="btn btn-danger card-btn-width">reject</button>
</div>
<div className="col-md-2">
<button id={appliedCandidate.id} onClick={this.individualChat} type="submit" className="btn btn-info card-btn-width" data-dismiss="modal">chat</button>
</div>
</div>
)
}
})}
</div>
</div>
</div>
</div>
</div>
)
})
}
</div >
)
}
}
const mapStateToProps = (state) => {
console.log(state);
return {
candidatephoneno: state.candidateSignin.phoneno,
appliedCandidates: state.getAppliedCandidates.appliedCandidate
}
}
const mapDispatchToProps = (dispatch) => {
return {
changeStatus: (statusid) => dispatch(changeStatus(statusid)),
}
}
export default connect(mapStateToProps, mapDispatchToProps)(EmpJobcontent)