0
  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

omcc
  • 25
  • 1
  • 5

1 Answers1

1

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
}
Drew Reese
  • 165,259
  • 14
  • 153
  • 181
  • oh okay it worked, didn't know html tags were react elements too, well the infowindow is not showing up so something else is probably wrong I'll work on that, thanks – omcc May 19 '20 at 06:48
  • @omcc You can try the info window without the conditional check and some basic dummy data just to check that it does indeed render, then work on the conditional logic. If you found helpful and resolved specific issue feel free to mark resolved/accepted. – Drew Reese May 19 '20 at 06:50
  • I figured it out just some misnamed variables, thanks though – omcc May 19 '20 at 07:27