Good morning. I want to know what is wrong with this script and why is handleclick not defined?
import React, { useState, useEffect } from "react";
import ReactMapGL, { GeolocateControl, Marker, Popup } from "react-map-gl";
import * as parkDate from "./data/skateboard-parks.json";
export default function App() {
const [viewport, setViewport] = useState({
latitude: 45.4211,
longitude: -75.6903,
width: "100vw",
height: "100vh",
zoom: 10
});
const ticketUrl='https://app.ticketmaster.com/discovery/v2/events.json?size=10&city=chicago&apikey=YOUR_KEY'
const geolocateStyle = {
position: 'absolute',
top: 0,
left: 0,
margin: 10
};
const [selectedPark, setSelectedPark] = useState(null);
handleClick = () => {
return fetch(ticketUrl)
.then((response) => response.json())
.then((responseJson) => {
console.clear()
for(var i=0; i<responseJson._embedded.events.length; i++){
console.log(responseJson._embedded.events[i]._embedded.venues[0]['location']);
}
})
.catch((error) => {
console.error(error);
});
}
useEffect(() => {
const listener = e => {
if (e.key === "Escape") {
setSelectedPark(null);
}
};
window.addEventListener("keydown", listener);
return () => {
window.removeEventListener("keydown", listener);
};
}, []);
handleClick = () => {
return fetch(ticketUrl)
.then((response) => response.json())
.then((responseJson) => {
console.log(responseJson._embedded.events[0]._embedded)
})
.catch((error) => {
console.error(error);
});
}
return (
<div>
<ReactMapGL
{...viewport}
mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
mapStyle="mapbox://styles/mapbox/dark-v9"
onViewportChange={viewport => {
setViewport(viewport);
}}
>
<GeolocateControl
style={geolocateStyle}
positionOptions={{enableHighAccuracy: true}}
trackUserLocation={true}
/>
<button onClick={this.handleClick}>Click Me</button>
{parkDate.features.map(park => (
<Marker
key={park.properties.PARK_ID}
latitude={park.geometry.coordinates[1]}
longitude={park.geometry.coordinates[0]}
>
<button
className="marker-btn"
onClick={e => {
e.preventDefault();
setSelectedPark(park);
}}
>
<img src="/skateboarding.svg" alt="Skate Park Icon" />
</button>
</Marker>
))}
{selectedPark ? (
<Popup
latitude={selectedPark.geometry.coordinates[1]}
longitude={selectedPark.geometry.coordinates[0]}
onClose={() => {
setSelectedPark(null);
}}
>
<div>
<h2>{selectedPark.properties.NAME}</h2>
<p>{selectedPark.properties.DESCRIPTIO}</p>
</div>
</Popup>
) : null}
</ReactMapGL>
</div>
);
}