React script not running

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>
  );
}

A post was merged into an existing topic: Uber React Map - Local Events App- Thread