React state not updating - reactjs

Question

So I'm making a simple React application that needs to show a modal when something is clicked. I use react-modal to achieve this and the modal is showing but I'm not able to close it again. Here's the code:
import React from 'react';
import ReactDOM from 'react-dom';
import Paper from "./Paper";
ReactDOM.render(
<Paper title={"Title"} notes={"Notes"}/>,
document.getElementById('root')
);
and the Paper definition:
import React, {Component} from 'react';
import Modal from 'react-modal';
class Paper extends Component {
constructor(props) {
super(props);
this.state = {modalIsOpen: false};
this.showModal = this.showModal.bind(this);
this.closeModal = this.closeModal.bind(this);
}
showModal() {
this.setState({modalIsOpen: true});
}
closeModal() {
this.setState({modalIsOpen: false});
}
render() {
return (
<div onClick={this.showModal}>
{this.props.title}
<Modal isOpen={this.state.modalIsOpen}>
<button onClick={this.closeModal}>close</button>
{this.props.notes}
</Modal>
</div>
);
}
}
The state just doesn't get updated if I check it in the developer tools and I have no idea why. Anyone who can help me?

Answer 1

I was able to reproduce your problem, which was actually a bit strange - even if I logged this.state.modalIsOpen in the setState callback after it was set to false, the value was still true. At any rate, I changed the code to perform a toggle instead and it resolved the issue:
https://codesandbox.io/s/q38nzl9yy9
toggleModal() {
this.setState({ modalIsOpen: !this.state.modalIsOpen });
}
render() {
return (
<div onClick={this.showModal}>
{this.props.title}
<Modal isOpen={this.state.modalIsOpen}>
<button onClick={this.closeModal}>close</button>
{this.props.notes}
</Modal>
</div>
);
}
I'm still digging into why the this context seems to be getting muddled, since this appears to be a straightforward example.