ReactJS - passing parameters to functions

I struggle with passing parameters to the onToggleOpen function - I render multiple markers (here only 2 for simplifying) and when I click on a marker, I want to display the respective InfoWindow for it. But when I click on the marker now, the method onToggleOpen is not triggered.

If I remove the indexes from markers and also from onToggleOpen, then the functionality of displaying and hiding InfoWindow boxes - but then all InfoWindow boxes will open and hide at the same time.

How do I properly pass the index to onToggleOpen?

const MyMapComponent = withScriptjs(withGoogleMap((props) => <GoogleMap defaultZoom={8} defaultCenter={{ lat: -34.397, lng: 150.644 }} > <Marker key='1' position={{ lat: -34.397, lng: 150.644 }} onClick={props.onToggleOpen(1)} > {props.isOpen && <InfoWindow onCloseClick={props.onToggleOpen}> <div>Something 1</div> </InfoWindow> } </Marker> <Marker key='2' position={{ lat: -33.867855, lng: 151.178897 }} onClick={props.onToggleOpen(2)} > {props.isOpen && <InfoWindow onCloseClick={props.onToggleOpen}> <div>Something 2</div> </InfoWindow> } </Marker> </GoogleMap> )) export default class GoogleMapsSample extends React.Component { constructor(props) { super(props) this.state = { isOpen: false } this.onToggleOpen = this.onToggleOpen.bind(this); } onToggleOpen(index){ console.log('x'); //this.setState({isOpen: !this.state.isOpen}) if (this.state.isOpen === index) { this.state.isOpen = false; } else { this.state.isOpen = index; } console.log(this.state.isOpen); } render() { const { isOpen } = this.state; console.log('isOpen: ', this.state.isOpen); return ( // Important! Always set the container height explicitly <div style={{ height: '100vh', width: '100%' }}> <MyMapComponent googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=AIzaSyDFD30jUKH0Cl8qrZoNCe-eEGQBIfApzE0" loadingElement={<div style={{ height: `100%` }} />} containerElement={<div style={{ height: `400px` }} />} mapElement={<div style={{ height: `100%` }} />} isOpen={isOpen} onToggleOpen={this.onToggleOpen} /> </div> ); } } 

EDIT: I am not sure that the attribute isOpen is changed here

constructor(props) { super(props) this.state = { isOpen: false } this.onToggleOpen = this.onToggleOpen.bind(this); } 

...

<Marker key='1' position={{ lat: -34.397, lng: 150.644 }} onClick={()=>props.onToggleOpen(1)} > {props.isOpen === 1 && <InfoWindow onCloseClick={props.onToggleOpen}> <div>Something 1</div> </InfoWindow> } </Marker> 

because the InfoWindow block is never executed. I thought that in the function where I change the state is something wrong:

onToggleOpen(index){ //this.setState({isOpen: !this.state.isOpen}) if (this.state.isOpen === index) { this.state.isOpen = false; } else { this.state.isOpen = index; } } 

but here the this.state.isOpen attribute is properly changed (tested with console.log). But even though here is isOpen is changed, the InfoWindow is never displayed after clicking on the marker.

I have also tried to set its value in contructor like this:

this.state = { isOpen: false } 

and the InfoWindow is displayed after loading the page, but when I click on the marker, nothing happens with the InfoWindow, it will not disappear and stays displayed (even though the values in onToggleOpen() are properly changed).

What am I overlooking here? Am I passing the value isOpen incorrectly to the Marker?