react state not being updated - reactjs

Question

I am trying to toggle the info window in react-google-maps off and on through a custom component. The toggle method is being called as I checked if it's logged. Here's the code:
/**
* Created by.
*/
import * as React from 'react'
import {Col, Row, Card, CardHeader, CardBody, CardColumns, CardText, CardFooter} from 'reactstrap'
import {InfoWindow, Marker} from 'react-google-maps'
export default class home extends React.Component {
state = {
isOpen: false
}
toggleOpen = () => {
this.setState(({ isOpen }) => (
{
isOpen: !isOpen,
}
));
if(this.state.isOpen)
console.log("state is open")
else
console.log("state is not open")
}
render()
{
const { isOpen } = this.state;
return (
<Marker
position={this.props.position}
onClick={this.toggleOpen}>
<InfoWindow isOpen={isOpen}>
<Card className="hovercard">
<Row>
<CardColumns sm={6} lg={3}>a
<CardHeader>
{this.props.homestay}
</CardHeader>
<CardText className="avatar">
<img alt="profile img" src={this.props.profilePic}/>
</CardText>
<div className="info">
<CardText>{this.props.descrip}</CardText>
</div>
<CardFooter>
{this.props.price}
</CardFooter>
</CardColumns>
</Row>
</Card>
</InfoWindow>
</Marker>
)
}
}
The infowindow is not opening when I click it. Any ideas?
EDIT ----
I changed the toggle method as you mentioned but the toggle is still not responding. Here's my project in sandeditor:https://codesandbox.io/s/93258nn8m4

Answer 1

You will need to put state in constructor for first time initialization or to create instance of the class, However not necessary always but use it to keep best practice.
constructor() {
this.state = {
isOpen: false
}
}
Also, I don't know if it is the correct way to setState
change this
toggleOpen = () => {
this.setState(({ isOpen }) => (
{
isOpen: !isOpen,
}
));
if(this.state.isOpen)
console.log("state is open")
else
console.log("state is not open")
}
to this
toggleOpen = () => {
this.setState({isOpen: !this.state.isOpen},() => {
if(this.state.isOpen)
console.log("state is open")
else
console.log("state is not open")
}
);
}
P.S. Beware because React setState is asynchronous!
Update
Just noticed that if you don't define a constructor in the class that is ok. Because The constructor is dead.
However, Your transpiler still will generate it in a constructor form which is satisfying.
So that part of your question; setting state without a constructor is fine but to setState is definitely not.

Answer 2

This reset the isOpen value.Once you are setting to current value and in callback you are toggling it.
this.setState(({ isOpen }) => (
{
isOpen: !isOpen,
}
));
Correct way:
this.setState(prevState) => (
{
isOpen: !isOpen,
}
));