Updating react-google-markers through search filter

Question

I've got a list of markers and a input field in a controlled component that searches for a particular query in the list. Then I have a map component which is a sibling to the marker list component. As I search for particular text in the input the marker list updates but the map does not update with the markers in the marker list.

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

class MarkerList extends Component {

  state = {
    query: ''
  }

  //input onChange handler
  updateQuery = (query) => {
    this.setState({ query: query.trim() })
  }

  render() {

    const { listIsOpen,
            toggleList,
            venues,
            handleListItemClick,
           } = this.props

    let venuesHasValue = false
    let markers = []
    //check whether venues array is valid
    if(venues !== undefined && venues.length > 0 && venues!== null) {
      venuesHasValue = true
    }
    //if venues array is not empty then loop through and return only 
   //data that is needed
   if (venuesHasValue) {
      let marker = {}
      venues.map(venue => {
      marker = {
        lat: venue.location.lat,
        lng: venue.location.lng,
        title: venue.name,
        venueId: venue.id,
        streetNumber: venue.location.formattedAddress[0],
        postCode: venue.location.formattedAddress[3],
    }
    markers.push(marker)
  })
}

let showingMarkers 
if (this.state.query) {
  const match = new RegExp(escapeRegExp(this.state.query), 'i')
  showingMarkers = markers.filter((marker) => match.test(marker.title))
} else {
  showingMarkers = markers
}

//sort list alphabetically
showingMarkers.sort(sortBy('title'))

return (
  <div>
    {listIsOpen ? (
      <div className='marker-list-open'>
        <label htmlFor='search'>Search</label>
        <input 
          id='search'
          type='text' 
          placeholder='search for burger or pizza'
          aria-required='true'
          className='list-filter'
          value={this.state.query}
          onChange={(e) => this.updateQuery(e.target.value)}
        />
        <div className='marker-list-container'>
          <ul className='venue-list'>
            {showingMarkers.map((marker, index) => {
              return (
                <li 
                  tabIndex='0'
                  key={index} 
                  placeholder={'search for burger or pizza'}
                  onClick={() => handleListItemClick(marker.venueId, marker)}
                >{marker.title}</li>
              )  
            })}
          </ul>
          <div className='list-toggle-close'>
            <img className='toggle-icon' src={require('../images/menu.svg')} alt='list closer' onClick={toggleList} />
          </div>
        </div>
      </div> 
    ) : (
      <div className='marker-list-closed'>
        <div className='list-toggle-open'>
          <img className='toggle-icon' src={require('../images/menu.svg')} alt='list opener' 
          onClick={toggleList} />
        </div>
      </div>
    )}
  </div> 
    )
  }
}

 export default MarkerList

How can I pass the filtered markers showingMarkers to map container component so that it updates accordingly?

Answer 1

You should maintain markers in state of Map Component. Then you can pass a handler as a prop of Map component to MarkerList. Once the showingMarker gets update you should setState the Map component with updated markers list like this:

<MarkerList
markersHandler={this.onMarkerUpdate}
/>

onMarkerUpdate will update the state of map component:

onMarkerUpdate = (markers) => {
   this.setState({
   markers
 });
}

in your markerList, you can pass updated marker list in handler, this will update your map component state:

this.props.markerHandler(showingaMarkers);

Finally in your map component, you can render your markers from state:

render(){
 const { markers } = this.state;
 return (
  <GoogleMap
  //google map props
  >
  markers.map((marker,i)=>{
    <Marker
      key={i}
      // your marker props
    />
  });
  )
 }
</GoogleMap>

PS if you can show you map component. This would be more easy to help you out. You can share on codesandbox.