title: React-google-maps infowindow `React.Children.only expected to receive a single React element child.`
body: <p>I am trying to open a infowindow on a specific marker on click, however when i click one it appears that all of them are opening instead, and showing me this error:
  <code>React.Children.only expected to receive a single React element child.</code></p>
  
  <p>This is what my code looks like right now:</p>
  
  <pre><code>import React, { Component } from 'react';
  import {  GoogleMap, Marker, withGoogleMap, withScriptjs, InfoWindow } from 'react-google-maps'
  
  class Map extends Component {
    state = {
      isOpen: false
    }
  
    handleMarkerClick = () =&gt; {
      this.setState({ isOpen: true})
    }
  
    render() {
      return(
      &lt;div&gt;
        &lt;GoogleMap
          defaultZoom={13}
          defaultCenter={{ lat: -22.9034778, lng: -43.1264636 }}
        &gt;{this.props.markers.map((marker, index) =&gt;(
          &lt;Marker
            key={index}
            position={marker.location}
            onClick={this.handleMarkerClick}
           &gt;{this.state.isOpen &amp;&amp; &lt;InfoWindow onCloseClick={this.handleMarkerClick}/&gt;}
         &lt;/Marker&gt;
        ))}
        &lt;/GoogleMap&gt;
      &lt;/div&gt;
      )
    }
  }
  
  export default withScriptjs(withGoogleMap(Map))
  </code></pre>
  
  <p><strong>Start of Edit</strong></p>
  
  <p>I made some changes to try and address the comment, however it isn't working yet, can you give me some hints on what i'm doing wrong, since i made some changes to the top component i will paste it here too:</p>
  
  <pre><code>import React, { Component } from 'react';
  import Map from './Map.js'
  import List from './List.js'
  import escapeRegExp from 'escape-string-regexp'
  import sortBy from 'sort-by'
  
  class App extends Component {
    state ={
      locations:[
        {
          name: "Paróquia Nossa Senhora das Dores do Ingá",
          location: {
            lat: -22.9038875,
            lng: -43.1252873
          },
          isOpen:false,
        },
        {
          name: "Museu de Arte Contemporanea de Niteroi",
          location: {
            lat: -22.9078182,
            lng: -43.1262919
          },
          isOpen:false,
        },
        {
          name: "UFF - Faculdade de Direito",
          location: {
            lat: -22.9038469,
            lng: -43.126024
          },
          isOpen:false,
        },
        {
          name: "Ponte Rio-Niterói",
          location: {
            lat: -22.8701,
            lng: -43.167
          },
          isOpen:false,
        },
        {
          name: "Fundação Oscar Niemeyer",
          location: {
            lat: -22.888533927137285,
            lng: -43.12815992250511
          },
          isOpen:false,
        },
        {
          name: "Campo de São Bento",
          location: {
            lat: -22.905279,
            lng: -43.107759
          },
          isOpen:false,
        }
      ],
      query:''
    }
  
    onToggleOpen = (location) =&gt; {
      this.setState({ isOpen: !this.isOpen })
    }
  
    updateQuery = (query) =&gt; {
      this.setState({ query: query.trim() })
      console.log(query)
    }
  
    componentDidMount() {}
    render() {
      const { query, locations } = this.state
  
      let filteredMarkers
      if(query) {
        const match = new RegExp(escapeRegExp(query), 'i')
        filteredMarkers = locations.filter((location) =&gt; match.test(location.name))
      }else {
        filteredMarkers = locations
      }
  
      filteredMarkers.sort(sortBy('name'))
  
      return (
        &lt;div className="App"&gt;
          &lt;div style={{height:`5vh`}}&gt;
            &lt;input
              type='text'
              placeholder='Search locations'
              value={query}
              onChange={(event) =&gt; this.updateQuery(event.target.value)}
            /&gt;
          &lt;/div&gt;
          &lt;List
            markers={filteredMarkers}
          /&gt;
          &lt;Map
            onToggle={this.onToggleOpen}
            googleMapURL="https://maps.googleapis.com/maps/api/js?&amp;key=AIzaSyAiqO5W1p5FAFf8RZD11PGigUXSlmVHguQ&amp;v=3"
            loadingElement={&lt;div style={{ height: `100%` }} /&gt;}
            containerElement={&lt;div style={{ height: `80vh` }} /&gt;}
            mapElement={&lt;div style={{ height: `100%` }} /&gt;}
            className="Map"
            markers={filteredMarkers}
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>Map.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import {  GoogleMap, Marker, withGoogleMap, withScriptjs, InfoWindow } from 'react-google-maps'
  
  class Map extends Component {
    render() {
      return(
      &lt;div&gt;
        &lt;GoogleMap
          defaultZoom={13}
          defaultCenter={{ lat: -22.9034778, lng: -43.1264636 }}
        &gt;{this.props.markers.map((marker, index) =&gt;(
          &lt;Marker
            key={index}
            position={marker.location}
            onClick={() =&gt; this.props.onToggle(marker)}
           &gt;{marker.isOpen &amp;&amp; &lt;InfoWindow onCloseClick={this.ontoggleOpen}&gt;Hello&lt;/InfoWindow&gt;}
         &lt;/Marker&gt;
        ))}
        &lt;/GoogleMap&gt;
      &lt;/div&gt;
      )
    }
  }
  
  export default withScriptjs(withGoogleMap(Map))
  </code></pre>