title: Updating child prop breaks connection with parent state
body: <p>I'm using <code>react-google-maps</code> to display markers on a map. When I use the <code>SearchBox</code> function in the child component to set <code>props.locations</code> my map <code>Markers</code> appear. However, when I use a button in the parent component to update the state of the <code>locations</code> within <code>MapWithASearchBox</code> the child prop doesn't recognise the change. If I reload the page and just use the button on the parent Component the markers appear correct. I assume I'm breaking the connection between child and parent when I set the prop within the child component. </p>
  
  <p>Path: <code>Parent Component MapPage.jsx</code></p>
  
  <pre><code>export default class MapPage extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        companies: []
      }
  
      this.handleButtonASXMarketCap = this.handleButtonASXMarketCap.bind(this);
    }
  
    handleButtonASXMarketCap(limit, e) {
      e.preventDefault();
  
      Meteor.call('getASXTop100', limit, (error, result) =&gt; {
        if (result) {
          this.setStateOfCompanies(result);
        }
      });
    }
  
    setStateOfCompanies(data) {
      this.setState({
        companies: data
      })
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;Button color="primary ml-2" onClick={(e) =&gt; this.handleButtonASXMarketCap(100, e)}&gt;Top 100 ASX&lt;/Button&gt;
  
          &lt;MapWithASearchBox
            locations={this.state.companies}
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Path: <code>Child Component MapWithASearchBox.jsx</code></p>
  
  <pre><code>const MapWithASearchBox = compose(
    withProps({
      googleMapURL: "myUrl",
      loadingElement: &lt;div style={{ height: `100%` }} /&gt;,
      containerElement: &lt;div style={{ height: `400px` }} /&gt;,
      mapElement: &lt;div style={{ height: `100%` }} /&gt;,
    }),
    lifecycle({
      componentWillMount() {
        const refs = {}
  
        this.setState({
          bounds: null,
          center: {
            lat: -23.696248, lng: 133.880731
          },
          zoom: 4,
          markers: [],
  
          onPlacesChanged: () =&gt; {
            const places = refs.searchBox.getPlaces();
            const bounds = new google.maps.LatLngBounds();
  
            places.forEach(place =&gt; {
              if (place.geometry.viewport) {
                bounds.union(place.geometry.viewport)
              } else {
                bounds.extend(place.geometry.location)
              }
            });
            const nextMarkers = places.map(place =&gt; ({
              position: place.geometry.location,
            }));
            const nextCenter = _.get(nextMarkers, '0.position', this.state.center);
  
            this.setState({
              center: nextCenter,
              markers: nextMarkers,
              zoom: 15
            });
  
            const lat = nextMarkers.map(x =&gt; x.position.lat());
            const lng = nextMarkers.map(x =&gt; x.position.lng());
  
            Meteor.call('runMethodTest', lat[0], lng[0], (error, result) =&gt; {
              if (result) {
                this.setState({
                  locations: result
                });
              }
            });
          },
        })
      },
    }),
    withScriptjs,
    withGoogleMap
  )(props =&gt;
    &lt;GoogleMap&gt;
      &lt;SearchBox
        ref={props.onSearchBoxMounted}
        bounds={props.bounds}
        controlPosition={google.maps.ControlPosition.TOP_LEFT}
        onPlacesChanged={props.onPlacesChanged}
      &gt;
        &lt;input
          type="text"
          placeholder="Customized your placeholder"
        /&gt;
      &lt;/SearchBox&gt;
  
      {props.locations.map((location, index) =&gt; (
        &lt;span key={location._id.location.lng}&gt;
          &lt;Marker
            position={location._id.location}
            onClick={() =&gt; props.onToggleOpen(index)}
          /&gt;
        &lt;/span&gt;
      ))}
    &lt;/GoogleMap&gt;
  );
  </code></pre>