How to render a component on every state change

window.google.maps.event.addListener(map, 'click', function( event ){
            self.setState( {lat : event.latLng.lat() , lng: event.latLng.lng() });

            
            
          });
  return (

<div>
            <div id="map" style={{ height: 600  , width: 600}}></div>

            
            {this.state.lat && <Marker lat={this.state.lat} lng={this.state.lng} map={this.state.map} />}

            </div>

        );

I want to call the ComponentDidMount() function of the < Marker / > component on every new lat and lng state change.

React uses a virtual DOM and event system, so that event listener is likely to just plain not work. You need to use an onClick handler on the proper React component.

Your Marker components will re-render automatically when their dependent data has changed.