ListItems.js

import React, { Component } from "react";
import escapeRegExp from 'escape-string-regexp'
import sortBy from 'sort-by'

class ListItems extends Component {
  state = {
    query: ''
  }

  updateQuery = (query) => {
    this.setState({ query: query.trim() })
  }

  clearQuery = () => {
    this.setState({ query: '' })
  }

  onListItemClick = (props, marker, e) => {
    console.log("sss");
    this.props.onListItemClick(marker);  
  }


  render(){

    const { venues } = this.props
    const { query } = this.state

    let showingVenues
    if(query){
      const match = new RegExp(escapeRegExp(query), 'i')
      showingVenues = venues.filter((venue) => match.test(venue.name))
    } else {
      showingVenues = venues
    }
    showingVenues.sort(sortBy('name'))

    const list = showingVenues.map((venue) => {
      return (
          <li
            key={venue.id}
            onClick={this.props.onListItemClick}
          >
            {venue.name}
          </li>
        )

    })

    return(
      <div>
        <div className="search-places">
          <div className="search-places-bar">
            <div className="search-places-input-wrapper">
              <input
                role="search"
                aria-labelledby="filter"
                type='text'
                placeholder='Search places'
                value={query}
                onChange={(event) => this.updateQuery(event.target.value)}
              />
            </div>
          </div>
        </div>

        {showingVenues.length !== venues.length && (
          <div className='showing-venues'>
            <span>Now showing {showingVenues.length} of {venues.length} total</span>
            <button onClick={this.clearQuery}>Show all</button>
          </div>
        )}

        <ol
          tabIndex="0"
          aria-label="List of concert halls"
          className="theList"
          >
          {list}
        </ol>
      </div>

    );
  }

};

export default ListItems

MyMap.js

import React, { Component } from 'react';
import {Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps-react';
import ListItems from './ListItems'

export class MyMap extends React.Component {
    constructor() {
      super();
      this.state = {
        showingInfoWindow: false,
        activeMarker: {},

      }
      this.onMarkerClick = this.onMarkerClick.bind(this);
    }


  onMarkerClick = (props, marker, e) => {
    console.log(marker);
    this.setState(
      {
      venues: this.props.venues,
      activeMarker: marker,
      showingInfoWindow: true
      }
    );
  }

  onListItemClick = (marker) => {
    console.log(marker);
    console.log("ssd");
    this.setState(
      {
        venues: this.props.venues,
        activeMarker: marker,
        showingWindow: true
      }
    );
  }


  render(){

    const markers = this.props.venues.map((venue, i) => {
      const marker = {
        position: {
          lat: venue.location.lat,
          lng: venue.location.lng
        },
        animation: window.google.maps.Animation.DROP
      }
      return <Marker key={venue.id} {...marker} onClick={this.onMarkerClick} title={venue.name} address={venue.location.address}/>

    })


    return(
      <Map
        google = {this.props.google}
        center = {this.props.center}
        zoom = {13}
        onClick={this.onMapClick}
        >
        {markers}

        <InfoWindow marker={this.state.activeMarker} visible={this.state.showingInfoWindow}>
          <div>
            <h3>{this.state.activeMarker.title}</h3>
            <h4>{this.state.activeMarker.address}</h4>
          </div>
        </InfoWindow>
        <ListItems venues={this.props.venues} marker={this.state.activeMarker} onListItemClick={this.onListItemClick}/>

      </Map>
    )
  }
}



export default GoogleApiWrapper({
  apiKey: 'AIzaSyB1ijS6t6OKocfsfAdu9Nuawo1NfwzJLHQ'
})(MyMap)