TypeError: Cannot read properties of undefined (reading 'map') - AirBnb Clone Tutorial

Question

Anyone know why I am getting the type error below? I am following along this tutorial (about 59 mins in): https://www.youtube.com/watch?v=G5mmrBkCaP8

Here is my code:

import React, { useState } from 'react';
import ReactMapGL from 'react-map-gl';
import { getCenter } from 'geolib';

function Map({ searchResults }) {

   const coordinates = searchResults.map((result) => ({ 
     longitude: result.long,
     latitude: result.lat,

   }));
// The latitude and longitude of the center of the coordinates
   const center = getCenter(coordinates);

   const [viewport, setViewport] = useState({
    width: "100%",
    height: "100%",
    latitude: center.latitude,
    longitude: center.longitude,
    zoom: 10,
});

  return ( 
  <ReactMapGL
  mapStyle='mapbox://styles/shesonanadventure/cl063x0yl000r15n4frjpm9in'
  mapboxAccessToken={process.env.mapbox_key}
  {...viewport}
  onViewportChange={(nextViewport) => setViewport(nextViewport)}
  ></ReactMapGL>
  );
}

export default Map;

Answer 1

SearchResults is undefined.

Do searchResults && searchResults.map

Also make sure you’re passing the prop