I’m trying to integrate Mapbox to a tutorial page I’m working on using following code ang calling API:https://www.jsonkeeper.com/b/5NPS, however instead of getting Object values I’m getting “undefined “
AirBnbMap.js (component)
import { useState } from "react";
import Map from "react-map-gl";
import { getCenter } from "geolib";
function AirBnbMap({ searchResults }) {
//Transform the search results objects in to
//{ latitude: 52.516272, longitude: 13.377722 },
//object
const coordinates = searchResults.map((result) => ({
longitude: result.long,
latitude: result.lat,
}));
console.log(coordinates);
//The latitude and longitude of the center of locations coordinates
const center = getCenter(coordinates);
const [viewState, setViewState] = useState({
longitude: center.longitude,
latitude: center.latitude,
zoom: 3.5,
});
return (
<Map
{...viewState}
onMove={(evt) => setViewState(evt.viewState)}
style={{ width: "100%", height: "100%" }}
mapStyle="mapbox://styles/mapbox/streets-v9"
mapboxAccessToken={process.env.mapbox_key}
/>
);
}
export default AirBnbMap;
search.js (page)
import { useRouter } from "next/router";
import { format } from "date-fns";
import Header from "../components/Header";
import Footer from "../components/Footer";
import InfoCard from "../components/InfoCard";
import AirBnbMap from "../components/AirBnbMap";
function Search({ searchResults }) {
const router = useRouter();
//ES6 Destrucuring
const { location, startDate, endDate, noOfGuests } = router.query;
const formattedStartDate = format(new Date(startDate), "dd MMMM yy");
const formattedEndDate = format(new Date(endDate), "dd MMMM yy");
const range = `${formattedStartDate} - ${formattedEndDate}`;
return (
<div>
<Header placeholder={`${location} | ${range} | ${noOfGuests} guests`} />
<main className="flex ">
<section className="flex-grow pt-14 px-6">
<p className="text-xs">
300+ Stays - {range} - for {noOfGuests} guests
</p>
<h1 className="text-3xl font-semibold mt-2 mb-6">
Stays in {location}
</h1>
<div className="hidden lg:inline-flex mb-5 space-x-3 text-gray-800 whitespace-nowrap">
<p className="button">Cancellation Flexibility</p>
<p className="button">Type of Place</p>
<p className="button">Price</p>
<p className="button">Rooms and Beds</p>
<p className="button">More filters</p>
</div>
<div className="flex flex-col">
{searchResults?.map(
({ img, location, title, description, star, price, total }) => (
<InfoCard
key={img}
img={img}
location={location}
title={title}
description={description}
star={star}
price={price}
total={total}
/>
)
)}
</div>
</section>
<section className="hidden xl:inline-flex xl:min-w-[40%] sticky top-[76px] h-[calc(100vh-76px)]">
<AirBnbMap />
</section>
</main>
<Footer />
</div>
);
}
export default Search;
export async function getServerSideProps() {
const searchResults = await fetch("https://www.jsonkeeper.com/b/5NPS").then(
(res) => res.json()
);
return {
props: {
searchResults,
},
};
}
Getting error:
Server Error
TypeError: Cannot read properties of undefined (reading ‘map’)
However expecting Object value:
