react state not being updated

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

How did you know it is not opened? by logging into inspector? — Manoz, Jun 18 '18 at 12:37

Manoz · Answer 1 · 2018-06-18T12:57:36.527

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.

score 0 · Answer 2 · answered Jun 18 '18 at 12:46

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,
            }
        ));

react state not being updated

2 Answers2