title: TypeError: Cannot read property 'filter' of undefined in react
body: <p>whenever I click on the items on li, my clickHandler function throws an error - TypeError: Cannot read property 'filter' of undefined. I am making a function whenever a user clicks on the item on the sidebar the InfoWindow popups. But can't see the problem in my code.</p>
  
  <p>Here is my App.js code:</p>
  
  <pre><code>  import React, { Component } from 'react';
      //import logo from './logo.svg';
      import './App.css';
      import axios from 'axios';
      //import SideBar from './components/SideBar';
  
  
      class App extends Component {
  
        constructor(props){
          super(props);
          this.state = {
            venues: [],
            markers: [],
            InfoWindow: [],
            map: [],
          }
          //this.clickHandler = this.clickHandler.bind(this);
        }
  
        componentDidMount(){
          this.getVenues()
          console.log("component did mount")
        }
  
        Map = () =&gt; {
          loadMapUrl();
          window.initMap = this.initMap;
        }
  
        initMap = () =&gt; {
          // Constructor creates a new map - only center and zoom are required.
           const map = new window.google.maps.Map(document.getElementById('map'), {
            center: {lat: 40.730610, lng: -73.935242},
            zoom: 14,
            mapTypeControl: true
          });
  
          const bounds = new window.google.maps.LatLngBounds();
          const InfoWindow = new window.google.maps.InfoWindow();
  
          //Ploting marker on the map using map function
           let markers = [];
           let venuesInfo = [];
          this.state.venues.map(myVenue =&gt; { 
            //const title = `${myVenue.venues.name}`; 
            //Content String Reference https://developers.google.com/maps/documentation/javascript/infowindows
            //const address = myVenue.venue.location.address;
            //const name = myVenue.venue.name;
            const contentString = `&lt;div&gt;&lt;h3&gt;${myVenue.venue.name.toUpperCase()}&lt;/h3&gt;
                                  &lt;h5&gt;Address: ${myVenue.venue.location.address}&lt;/h5&gt;
                                  &lt;h5&gt;Location: ${myVenue.venue.location.city}, ${myVenue.venue.location.state} &lt;/h5&gt;
                                  &lt;h5&gt;Pincode:${myVenue.venue.location.postalCode}&lt;/h5&gt;
                                  &lt;p&gt;&lt;strong&gt; ${'&lt;a href="https://foursquare.com/v/' + myVenue.venue.id + '" target="_blank"&gt;Click Here For More Info&lt;/a&gt;'} &lt;/strong&gt; &lt;/p&gt;&lt;/div&gt;`
            // Creating marker
            //const venues =[];
            const marker = new window.google.maps.Marker({
              map: map,
              position: {lat: myVenue.venue.location.lat, lng: myVenue.venue.location.lng},
              animation: window.google.maps.Animation.DROP,
              name: myVenue.name,
              id: myVenue.id,
              });
  
              marker.addListener('click', () =&gt; {
                if(marker.getAnimation() !== null){marker.setAnimation(null);}
                else{marker.setAnimation(window.google.maps.Animation.BOUNCE);}
                setTimeout(function(){ marker.setAnimation(null) }, 1500)
              });
  
                window.google.maps.event.addListener(marker, 'click', () =&gt; {
                // Putting all the content on the map
                InfoWindow.setContent(contentString)
                //Centering the position of the map according to the marker
                map.setCenter(marker.position);
  
                InfoWindow.open(map, marker);
              });
  
              markers.push(marker);
              venuesInfo.push({id: myVenue.venue.id, name:myVenue.venue.name, contents: contentString})
  
              bounds.extend(marker.getPosition());
              //Adding listener to the marker
              map.fitBounds(bounds);
              this.setState({
                map: map,
                markers: markers,
                InfoWindow: InfoWindow,
                venues: venuesInfo
                });
  
            return myVenue.marker;
  
          });
        }
  
  **//This is the arrow function**
        clickHandler = (venues) =&gt; {
          let marker = this.markers.filter(m =&gt; m.id === venues.id);
            // Putting all the content on the map
            this.state.InfoWindow.setContent(marker.contents)
            //Centering the position of the map according to the marker
           // this.state.map.setCenter(this.marker.position);
           this.state.InfoWindow.open(this.map, marker);
          console.log(marker)
        }
  
        //Fetching places information using Foursquare API
          getVenues = () =&gt; {
            const endPoint = "https://api.foursquare.com/v2/venues/explore?"
            const credentials = {
              client_id: "ZAM2ZVYH1W4E5KRSTWM140LP5UWX20J5XHK4NAUJLO5CJUNH",
              client_secret: "CZTDHFFXI4SXYOXAN41MCUG2PPDEDIAATTCVRC1FUMGOSI1C",
              query: "Food",
              near: "New York", 
              v: "20181107",
              limit:10,
            }
  
            //Promise based HTTP client for the browser
            axios.get(endPoint + new URLSearchParams(credentials))
            .then(response =&gt; {
              this.setState({
                venues: response.data.response.groups[0].items
              }, this.Map() )//callback function
            })
            .catch(error =&gt;{
              alert('Error Occured While Fetching Foursquare API' + error);
            })
          }
  
  
        render() {
          return (
           &lt;main id="App"&gt;
            &lt;div id="sideBar"&gt;
                  &lt;div id="heading"&gt;
                  &lt;h2&gt;Food Places&lt;/h2&gt;
                  &lt;div id="search"&gt;
                  &lt;input type="text" placeholder="Search.." aria-labelledby="filter" &gt;&lt;/input&gt;
                  &lt;/div&gt;
                  &lt;/div&gt;
                  {this.state.venues  &amp;&amp; this.state.venues.map((venue, id) =&gt; ( 
                    &lt;div key={id} id="venueList"  onClick={() =&gt; {this.clickHandler(venue)}}&gt;
                     &lt;ul id="listItem"&gt;
                    &lt;li&gt;
                     {venue.name}
                    &lt;/li&gt;
                    &lt;/ul&gt;
                    &lt;/div&gt;
                   ))}
                  &lt;/div&gt;
             &lt;div id="map"&gt;
             &lt;/div&gt;
           &lt;/main&gt;
          );
        }
  
      }
      // This function will generate script tag and will insert the google map API URL Dynamically.
      function loadMapUrl(){
        const scriptTag = window.document.createElement('script');
        const apiKey = 'AIzaSyASFSGSrxEXyjwZSqMyzRJBbfq_eFutui8';
        scriptTag.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&amp;callback=initMap`;
        scriptTag.async = true;
        scriptTag.defer = true;
        document.body.appendChild(scriptTag);
      }
  
      export default App;
  </code></pre>