Cfrgtkky

So I am still new to React, I have two components, one creates a map and the other lists places on the map, I am trying to find a way so that when one of the list items is clicked that the InfoWindow on the map pops up.

This is the Map Component

import React, { Component } from 'react';

import {Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps-react';



var  AllPlaces = [

  {

    "name" : "Pizza",

    "lat": "40.7589",

    "lng":"-73.9851",

  },



  {

    "name" : "Cookies",

    "lat": "40.7690",

    "lng":"-73.9952",

  }

]



class MapContainer extends Component {

state = {

showingInfoWindow: false,

activeMarker: {},

selectedPlace: {},

};



onMarkerClick = (props, marker, e) =>

this.setState({

  selectedPlace: props,

  activeMarker: marker,

  showingInfoWindow: true

 });



onMapClicked = (props) => {

if (this.state.showingInfoWindow) {

  this.setState({

    showingInfoWindow: false,

    activeMarker: null

  })

}

};



render() {

return (

  <div className = 'map-container' style={{marginleft:'250px'}}>

    <Map google={this.props.google} zoom={14}

      initialCenter = {{lat:40.7589, lng:-73.9851}}

      onClick={this.onMapClicked}>

      <Marker

        onClick={this.onMarkerClick}

        title = {AllPlaces[0].name}

        name={AllPlaces[0].name}

        position = {{lat:AllPlaces[0].lat,lng:AllPlaces[0].lng}}/>

      <Marker

        onClick={this.onMarkerClick}

        title = {AllPlaces[1].name}

        name={AllPlaces[1].name}

        position = {{lat:AllPlaces[1].lat,lng:AllPlaces[1].lng}}/>

      <InfoWindow

        onOpen={this.windowHasOpened}

        onClose={this.windowHasClosed}

        marker={this.state.activeMarker}

        visible={this.state.showingInfoWindow}>

        <div>

          <h1>{this.state.selectedPlace.name}</h1>

        </div>

      </InfoWindow>

    </Map>

  </div>

);

}

}



export default GoogleApiWrapper({

apiKey: 'AIzaSyC21SntdNn1vCb5VOAujCPIM7a9p5XkvRs'

})(MapContainer)

And this is the List Component

{import React, { Component } from 'react';

import { GoogleApiWrapper, InfoWindow, Map, Marker } from 'google-maps- 

react';



var  AllPlaces = [

  {

    "name" : "Pizza",

    "lat": "40.7589",

    "lng":"-73.9851",

  },



  {

    "name" : "Cookies",

    "lat": "40.7690",

    "lng":"-73.9952",

  }

]



class ListPlaces extends Component {



CreateInputField = () => {

return <input

placeholder = "Search Nearby Places"

/>

}



findPlaces = () => {

return(

  <ol className='Places'>

    {AllPlaces.map((arrayItem, index)=>

      <li

      key = {index}

      className='Place'

      >{arrayItem.name}</li>

    )}

  </ol>

)

}



render() {

return(

  <div>

    <div className = 'sideMenu'>

      <div className = 'List'>

        <h1 className = 'title'> Places to Eat </h1>

        {this.CreateInputField()}

      </div>

      <div className = 'PlaceList'>

        {this.findPlaces()}

      </div>

    </div>

  </div>

)

}

}

export default ListPlaces

}

I have no idea how I can make it so that when one of the items in the list component are clicked that the correct InfoWindow will show.

You can define a method within the parent component which retrieves the clicked item information and stores them in its state. Then give the value of the state to the other component. Something like:

// Parent.js



class Parent extends Component {

    state = {

        ...

        position: null;

    }



    ...



    setPosition = (position) => {

      this.setState({ position })

    }



    render () {

        return (

          <Fragment>

              <A position={this.state.position} />

              <B setPosition={this.setPosition} />

          </Fragment>

        )

    }

}



// B.js



class B extends Component {

  ...



  notifyParent = (item) => {

    this.props.setPosition(item)

  }



  render () {

    return (

      <ul>

          {items && items.map(item => (

            <li onClick={() => this.notifyParent(item)}>

                {item.key}

            </li>

          ))}

      </ul>

    )

  }

}