reactjsgoogle-map-react

Invalid prop 'children' of type 'array' supplied to 'InfoWindow', expected a single ReactElement


  render() {
    const { showingInfoWindow, activePosition, selected } = this.state;
    return (
      <Map
        google={this.props.google}
        zoom={8}
        initialCenter={{ lat: 89, lng: -53 }}
      >
        {this.displayMarkers()}

        {showingInfoWindow ? (<InfoWindow position={this.state.activePosition} visible={this.state.showingInfowindow} onClose={this.onClose}>
          <div>
            <bold>Title: </bold>
            {this.state.selected.title}
          </div>
          <div>
            <bold>Description: </bold>
            {this.state.selected.description}
          </div>
        </InfoWindow>) : null}
      </Map>
    );
  }

I checked other answers and it seems this error message means I am providing more than one child react element to InfoWindow, but I don't see how I am doing that. It'd make sense if the error message were directed to Map with all the Marker children elements, any help would be appreciated


Solution

  • That is exactly what that error/warning message means.

    InfoWindow

    InfoWindow.propTypes = {
      children: PropTypes.element.isRequired, // <-- allows single child only
      map: PropTypes.object,
      marker: PropTypes.object,
      position: PropTypes.object,
      visible: PropTypes.bool,
    
      // callbacks
      onClose: PropTypes.func,
      onOpen: PropTypes.func
    }
    

    You can wrap them in a div or Fragment

    {showingInfoWindow ? (
      <InfoWindow position={this.state.activePosition} visible={this.state.showingInfowindow} onClose={this.onClose}>
        <Fragment>
          <div>
            <bold>Title: </bold>
            {this.state.selected.title}
          </div>
          <div>
            <bold>Description: </bold>
            {this.state.selected.description}
          </div>
        </Fragment>
      </InfoWindow>)
      : null
    }