On a page, there's a button overlayed that is supposed to dim the background and display a modal popup when pressed.
However, in my code, the modal popup appears but the background remains unaffected. The modal opens and closes correctly, though.
Button code:
class MessageBrokerButton extends Component {
constructor(props) {
super(props)
this.state = {
isShowing: false
}
}
openModalHandler = (e) => {
this.setState({
isShowing: true
});
e.preventDefault();
}
closeModalHandler = () => {
this.setState({
isShowing: false
});
}
render() {
return (
<div>
<button className='message-broker' onClick={this.openModalHandler}>
Message Broker
</button>
<div className='message-icon'></div>
{ this.state.isShowing ?
<Popup
show={this.state.isShowing}
close={this.closeModalHandler}>
Test
</Popup>
: null
}
</div>
)
}
}
Modal code:
const Popup = (props) => {
return (
<div>
<button onClick={props.close}>CLOSE</button>
<p> {props.children}</p>
</div>
)
}
Page code snippet where the button is placed:
class Page extends Component {
constructor(props) {
super(props);
this.state = {
};
};
render() {
let page100 =
<div>
<MessageBrokerButton></MessageBrokerButton>
</div>
if (this.props.currentPage !== this.state.page) {
page100 = null;
}
return (
<form onSubmit={this.handleFormSubmit}>
{page100}
</form>
);
}
}
I acknowledge that I may not be following correct styling rules and handling the Page class properly once the MessageBrokerButton is clicked. I need guidance on which parts to modify and what changes are necessary.