React-modal setstate not working - reactjs

Question

export class StartContainer extends Component {
constructor(props) {
super(props);
this.state = {
showModal: false
};
}
handleOpenModal = () => {
console.log("Here")
//this.setState({ showModal: true }, () =>{ console.log(this.state) });
this.setState(() => {
console.log("Changing state")
return { showModal: true }
});
}
handleCloseModal = () => {
console.log(this.state.showModal)
this.setState( );
}
render() {
console.log(this.state)
return (
<div>
<StartComponent handleModalOpen={this.handleOpenModal} />
<ReactModal
isOpen={this.state.showModal}
contentLabel="Minimal Modal Example"
>asda
<button onClick={this.handleCloseModal}>Close Modal</button>
</ReactModal>
</div>
)
}
}
So I am trying to integrate react-modal into my project.
The this.setState() method is not called I see no console log, neither when I pass a callback to the setState() methpd.
Can somebody help me please?
Thx for your time!
UPDATE -- Start component code.
export const StartComponent = (props) => (
<div className="start-page">
<div className="container">
<div className="row">
<div className="col-sm-6">
<NavLink to="/start/klarungsfalle">Einträge prüfen</NavLink>
</div>
<div className="col-sm-6" >
<NavLink onClick={props.handleModalOpen} style={{ background: "#aac4d3", cursor: "default" }} to="/">Einträge verfügen</NavLink>
</div>
</div>
</div>
</div>
);
Plus I have to mention that I am also using redux.

Answer 1

Your code seems to work for me. I just set up the <StartComponent /> and it looks like the state is being set how you want.
Try the following snippet which uses your code:
Alternatively you can check out this CodePen Demo.
const { HashRouter, NavLink } = ReactRouterDOM;
const App = () => (
<HashRouter>
<Modal />
</HashRouter>
);
const StartComponent = ({currentState, handleModalOpen, handleNix}) => (
<div className="start-page">
<div className="container">
<div className="row">
<div className="col-sm-6">
<NavLink to="/start/klarungsfalle" onClick={handleNix}>Einträge prüfen</NavLink>
</div>
<div className="col-sm-6">
<NavLink
onClick={handleModalOpen}
style={{ background: "#aac4d3", cursor: "default" }}
to="/"
>
Einträge verfügen
</NavLink>
</div>
</div>
<div className='row justify-center'>
<div className='col-xs-12'>
<div>
<code>Modal</code> state
<pre>{JSON.stringify(currentState)}</pre>
</div>
</div>
</div>
</div>
</div>
);
class Modal extends React.Component {
constructor(props) {
super(props);
this.state = {
showModal: false
};
}
handleOpenModal = () => {
console.log("Here");
this.setState(() => {
console.log(`Changing state to 'showModal: ${this.state.showModal}'`);
return { showModal: true };
});
};
handleNix = () => {
alert("hier gibt's nichts");
}
handleCloseModal = () => {
console.log(this.state.showModal);
this.setState(() => {
console.log(`Changing state to 'showModal: ${this.state.showModal}'`);
return { showModal: false };
});
};
render() {
console.log(this.state);
return (
<div className="container">
<StartComponent
handleModalOpen={this.handleOpenModal}
handleNix={this.handleNix}
currentState={this.state}/>
<ReactModal
isOpen={this.state.showModal}
contentLabel="Minimal Modal Example">
<div className="flex columns-center">
<div className="note">
The modal hides the Stack Overflow console. Look behind the modal
or open your JS console.
</div>
<div className="flex">
<div>
<code>Modal</code> state
<pre>{JSON.stringify(this.state)}</pre>
</div>
<button
className="btn btn-sm btn-danger"
onClick={this.handleCloseModal}>
Close Modal
</button>
</div>
</div>
</ReactModal>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));
.flex {
display: flex;
}
.justify-center {
justify-content: center;
}
.space-around {
justify-content: space-around;
}
.columns-center {
flex-direction: column;
align-items: center;
}
.note {
font-size: 0.7em;
margin-bottom: 1rem;
}
.btn:after {
content: "\01F436";
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-modal/2.3.2/react-modal.min.js"></script>

Answer 2

The problem seems to be some missing bindings needed for es6 when working with events. So for handlers to access state just put these bindings in you constructor :
constructor() {
super();
this.state = {
showModal: false
};
// bindings
this.handleOpenModal = this.handleOpenModal.bind(this);
this.handleCloseModal = this.handleCloseModal.bind(this);
}
Anonymous functions are not needed there :
handleOpenModal() {
this.setState({showModal: true});
}
handleCloseModal() {
this.setState({showModal: false});
}

Answer 3

You have to bind functions to use 'this' keyword
constructor() {
super();
this.state = {
showModal: false
};
this.handleOpenModal = this.handleOpenModal.bind(this);
this.handleCloseModal = this.handleCloseModal.bind(this);
}

Answer 4

Passing a callback into setState means that when setState finishes it'll run that function next; setState is async, but that's not going to help you here. It might be helpful to provide the code for your StartComponent component as it's likely your handler function isn't being called.
try onClick={() => props.handleModalOpen()}
Note: just a suggestion, consider naming your props the same thing in child as in parent cause handleModalOpen and handleOpenModal can get confusing.