title: React Error Handling Fetch Data Venues List
body: <p>I am fetching data using the Foursquare API within a React app using the Google Map API and react-google-map.</p>
  
  <p>When I create a list of venues and try to check if the error handling works by deleting some characters from the API link, the app crashes because the venues state is empty.</p>
  
  <p>I should be adding a conditional statement to the function that maps through the data to check if it's null, but I don't know how to do it.</p>
  
  <p>Here is my repository:</p>
  
  <pre><code>https://github.com/Katesold/Watford-Map
  </code></pre>
  
  <p>If someone could advise me on how to do it, I would really appreciate it.</p>
  
  <p>What I have been trying looks like this:</p>
  
  <pre><code>filterCafes = (cafes, query) =&gt; {
      cafes !== undefined ? cafes.filter(cafe =&gt; 
      cafe.name.toLowerCase().includes(query.toLowerCase())): "error";
  }
  </code></pre>
  
  <p>Here's the error I got:
  <a href="https://i.stack.imgur.com/gwPZ4.jpg" rel="nofollow noreferrer">app crashes</a></p>