Infowindow not showing up on map app made using ReactJS

I'm using ReactJS and creating a Google Maps component, and it works reasonably well, but for the infowindow not showing up when I click. Is this something to do with the way React is consuming events? The relevant code is:

var MapContainer = React.createClass({
map: null,
infowindow:null,
createMarker: function(place){
    var placeLoc = place.geometry.location;
    var marker = new google.maps.Marker({
    map: this.map,
    position: place.geometry.location
    });
    google.maps.event.addListener(marker, 'click', function() {
    this.infowindow.setContent(place.name);
    this.infowindow.open(map, marker);
    });
},
componentDidMount: function(){
    var center = new google.maps.LatLng(this.props.locationProp.lat, this.props.locationProp.lng);
    this.map = new google.maps.Map(this.refs.map_canvas, {center: center, zoom: 15});
    var request = {
        location: center,
        radius: 500,
        types: ['restaurant']
    };

    this.infowindow = new google.maps.InfoWindow();
    service = new google.maps.places.PlacesService(this.map);
    service.nearbySearch(request, this.mapCallBack);

},
mapCallBack: function(results, status){
 if(status === google.maps.places.PlacesServiceStatus.OK){
    this.setState({resultsState: results});
    for (var i = 0; i < results.length; i++) {

        this.createMarker(results[i]);
    }
 },
 render: function(){
    return(
        <div className="mapAndListContainer">
            <div ref="map_canvas" className="mapCanvas">
            </div>
            <ListSorter propertyResults />
        </div>
        );
 }
});

For some reason, infoWindow reference is being lost. As a stop-gap measure, a simple fix is to re-parent infoWindow on some other entity. In the below example, I have re-parented it onto window -

var MapContainer = React.createClass({
map: null,
infowindow:null,
createMarker: function(place){
    var placeLoc = place.geometry.location;
    var marker = new google.maps.Marker({
    map: this.map,
    position: place.geometry.location
    });
    google.maps.event.addListener(marker, 'click', function() {
    window.infowindow.setContent(place.name);
    window.infowindow.open(this.map, marker);
    });
},
componentDidMount: function(){
    var center = new google.maps.LatLng(this.props.locationProp.lat, this.props.locationProp.lng);
    this.map = new google.maps.Map(this.refs.map_canvas, {center: center, zoom: 15});
    var request = {
        location: center,
        radius: 500,
        types: ['restaurant']
    };
    window.infowindow = new google.maps.InfoWindow();

    var service = new google.maps.places.PlacesService(this.map);
    service.nearbySearch(request, this.mapCallBack);

},
mapCallBack: function(results, status){
console.log(results);
console.log(status);
 if(status === google.maps.places.PlacesServiceStatus.OK){
    this.setState({resultsState: results});
    for (var i = 0; i < results.length; i++) {

        this.createMarker(results[i]);
    }
 }
},
render: function(){
    return(
        <div className="mapAndListContainer">
            <div ref="map_canvas" className="mapCanvas" style={{width:600, height:600}}>
            </div>
        </div>
        );
 }
});

setTimeout(function(){
ReactDOM.render(
    <MapContainer locationProp={{lat:33.808678, lng:-117.918921}}/>,
    document.getElementById('container')
)}, 4000);