complete new to React and just started taking a Udemy course a few days ago. I decided to take what I learned so far and try building a simple app that uses React Map GL and passes a different longitude and latitude value to the map when a city is clicked. However, I’m running into an issue right now where I simply want the action of clicking an li element to log a message to the console and it doesn’t seem to be working.
For additional context, I’m working from Create React app.
Here’s my App.js file:
import * as React from "react";
import Map from "react-map-gl";
import "./App.css";
import ItineraryCard from "./components/ItineraryCard";
import { MAIN_CITIES } from "./data.js";
//import { useState } from "react";
function App() {
function onSelectCity(selectedCity) {
console.log(selectedCity);
}
return (
<div>
<Map
mapLib={import("mapbox-gl")}
initialViewState={{
longitude: 10.754904098570327,
latitude: 59.91262074459316,
zoom: 6.5,
}}
style={{ width: 600, height: 400 }}
mapStyle="mapbox://styles/mapbox/streets-v9"
/>
<br></br>
<br></br>
<br></br>
<section>
<h1>Itinerary</h1>
<ul>
<ItineraryCard
onSelect={() => onSelectCity("Oslo")}
title={MAIN_CITIES[0].title}
description={MAIN_CITIES[0].description}
/>
<ItineraryCard
onSelect={() => onSelectCity("Stavanger")}
title={MAIN_CITIES[1].title}
description={MAIN_CITIES[1].description}
/>
<ItineraryCard
onSelect={() => onSelectCity("Bergen")}
title={MAIN_CITIES[2].title}
description={MAIN_CITIES[2].description}
/>
</ul>
</section>
</div>
);
}
export default App;
My component file for the ItineraryCard:
export default function ItineraryCard({ title, description, onSelect }) {
return (
<li onClick={onSelect}>
<h3>{title}</h3>
<p>{description}</p>
</li>
);
}
Not sure if I need to provide anything other files that may be useful, but any assistance or help would be greatly appreciated. Thanks!