Calling an onclick event from a different Component - reactjs

Question

I am desperatly trying to make my code works between 2 components by using the onclick event of my modal component to my Avaibalities component but nothing happens.
How can i make the value of my state ShowModal works?
Avaibalities Component
import React from 'react';
import Calendar from 'react-calendar';
import Modal from '../pages/Modal';
class Avaibalities extends React.Component {
state = {
date: new Date(),
showDate: false,
showModal: false,
};
onChange = (date) => {
this.setState({ date });
};
validation = () => {
this.setState({
showDate: true,
});
};
togglePop = () => {
this.setState({
showModal: true
});
};
render() {
return (
<div>
<div className="home">
<div className="calendarContent">
<div>
<Calendar
onChange={this.onChange}
value={this.state.date}
locale="en-GB"
/>
<>
<button className={'button'}>Validate</button>
<div>
{this.state.showModal ? (
<Modal toggle={this.togglePop} />
) : null}
</>
{this.state.showDate ? (
<div>
<p>
From : {this.state.date[0].toLocaleDateString()} to :{' '}
{this.state.date[1].toLocaleDateString()}
</p>
</div>
) : null}
</div>
</div>
</div>
);
}
}
export default Avaibalities;
Modal Component
import React from 'react';
class Modal extends React.Component {
handleClick = () => {
this.props.toggle();
};
render() {
return (
<div className="modal">
<div className="modal_content">
<span className="close" onClick={this.handleClick}>×</span>
<p>I'm A Pop Up!!!</p>
</div>
</div>
);
}
}
export default Modal;
Looking for someone to help me,
Thank you very much

Answer 1

You do not render your modal in this code because I see that showModal initially false and to set it as true you call tooglePop function as a props in Modal. But render of Modal component depends on showModal state so it never renders because initially false

Answer 2

You can't expect something to happen here.
To display your modal, you need this.state.showModal = true. In your modal, you are setting showModal to true but it's not different than te previous state, so nothing happens.
Change your method as follow :
togglePop = () => {
this.setState(prevState => ({
...prevState,
showModal: !prevState.showModal
}));
};