InfoWindow blinks with React 16

[alexander-morozov]

Issue is similar to #408 but another reason

Probably the main reason is that unstable_renderIntoContainer was changed in React 16 version and doesn't return new content immediately
facebook/react#10309

react version: 16.0.0
browser: Chrome

[tomchentw]

Released v9.2.2

[SCasarotto]

Is there any chance this release caused: https://stackoverflow.com/questions/47229253/target-container-is-not-a-dom-element-with-react-google-maps-with-markers-infowi

[tomchentw]

This is weird. Probably

[SCasarotto]

What would be helpful in trying to track this down? I am new to this repo but I could try to build the simplest case if that would be useful. However, if you have a hunch or know what is causing it I can just check back.

[tomchentw]

@SCasarotto could you try one thing for me? For all <InfoWindow> used in render, could you add unique key to them? I'm wondering if React tries to re-use the instance that breaks.

[SCasarotto]

Just tested and same result in my use case. I added the keyForWindow through the props of my component and the keys were unique.

<InfoWindow onCloseClick={onCloseClick} key={keyForWindow}>{children}</InfoWindow>

[SCasarotto]

Came back to say. I updated to 9.4.1 and everything seems to be working as expected. Huge thanks!!

[tomchentw]

Seems to be fixed by #699?

[SCasarotto]

Yep. By v9.2.3

[tomchentw]

Awesome

[farrukh-malik]

Here is a complete solution InfoWindow shows. i have also attached the link you can see for more understanding.. https://codesandbox.io/s/quizzical-hermann-5ehs7

import React, { Component } from "react";
import { Map, InfoWindow, Marker, GoogleApiWrapper } from "google-maps-react";

export class MapContainer extends Component {
  state = {
    activeMarker: {},
    selectedPlace: {},
    showingInfoWindow: false
  };

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

  onInfoWindowClose = () =>
    this.setState({
      activeMarker: null,
      showingInfoWindow: false
    });

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

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

    return (
      <Map
        className="map"
        google={this.props.google}
        onClick={this.onMapClicked}
        style={{ height: "100%", position: "relative", width: "100%" }}
        zoom={13}
      >
        <Marker
          name="Marker 1"
          onClick={this.onMarkerClick}
          position={{ lat: 37.778519, lng: -122.40564 }}
        />

        <Marker
          name="Marker 2"
          onClick={this.onMarkerClick}
          position={{ lat: 37.759703, lng: -122.428093 }}
        />

        <Marker name="Marker 3" onClick={this.onMarkerClick} />

        <InfoWindow
          marker={this.state.activeMarker}
          onClose={this.onInfoWindowClose}
          visible={this.state.showingInfoWindow}
        >
          <div>
            <h4>{this.state.selectedPlace.name}</h4>
          </div>
        </InfoWindow>
      </Map>
    );
  }
}
export default GoogleApiWrapper({
  apiKey: "",
  version: "3.38"
})(MapContainer);

enter image description here