react google maps ReferenceError: state is not defined

Question

I'm building a google map with clickable markers and info windows. I got this error, "ReferenceError: state is not defined" and I don't know what is causing it.

Here is my componet function:

export class Container extends React.Component {
  render() {
    if (!this.props.loaded) {
      return <div>Loading...</div>;
    }

    const style = {
      width: "100vw",
      height: "90vh"
    };

    state = {
      showingInfoWindow: false,
      activeMarker: {},
      selectedPlace: {}
    };

    onMarkerClick = (props, marker, e) =>
      this.setState({
        selectedPlace: props,
        activeMarker: marker,
        showingInfoWindow: true
      });

    onMapClicked = props => {
      if (this.state.showingInfoWindow) {
        this.setState({
          showingInfoWindow: false,
          activeMarker: null
        });
      }
    };

    return (
      <div style={style}>
        <Map
          item
          xs={12}
          google={this.props.google}
          onClick={this.onMapClick}
          zoom={13}
          initialCenter={{ lat: 39.3643, lng: -74.4229 }}
        >
          <Marker
            onClick={this.onMarkerClick}
            title={"The marker`s title will appear as a tooltip."}
            name={"Salvation Army"}
            position={{ lat: 39.3549, lng: -74.4429 }}
          />

          <InfoWindow
            marker={this.state.activeMarker}
            visible={this.state.showingInfoWindow}
          >
            <div>
              <h1>{this.state.selectedPlace.name}</h1>
            </div>
          </InfoWindow>
        </Map>
      </div>
    );
  }
}

Everything seems to be right, however I'm still receiving the error. Any help would be greatly appreciated!

Answer 1

You are using the state variable in your render method without declaring it first.

const state = {
  showingInfoWindow: false,
  activeMarker: {},
  selectedPlace: {}
};

You most likely intended to make it into a class property instead.

const style = {
  width: "100vw",
  height: "90vh"
};

export class Container extends React.Component {
  state = {
    showingInfoWindow: false,
    activeMarker: {},
    selectedPlace: {}
  };

  onMarkerClick = (props, marker, e) =>
    this.setState({
      selectedPlace: props,
      activeMarker: marker,
      showingInfoWindow: true
    });

  onMapClicked = props => {
    if (this.state.showingInfoWindow) {
      this.setState({
        showingInfoWindow: false,
        activeMarker: null
      });
    }
  };

  render() {
    if (!this.props.loaded) {
      return <div>Loading...</div>;
    }

    return (
      <div style={style}>
        <Map
          item
          xs={12}
          google={this.props.google}
          onClick={this.onMapClick}
          zoom={13}
          initialCenter={{ lat: 39.3643, lng: -74.4229 }}
        >
          <Marker
            onClick={this.onMarkerClick}
            title={"The marker`s title will appear as a tooltip."}
            name={"Salvation Army"}
            position={{ lat: 39.3549, lng: -74.4429 }}
          />

          <InfoWindow
            marker={this.state.activeMarker}
            visible={this.state.showingInfoWindow}
          >
            <div>
              <h1>{this.state.selectedPlace.name}</h1>
            </div>
          </InfoWindow>
        </Map>
      </div>
    );
  }
}