Uber React Map - Local Events App- Thread

Edit: here is the repo I set up and you can see the test case of what I did so far:

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);
    };
  }, []);

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

Use {() => this.handleClick()} in your JSX as a value of onClick.

As an alternative you can change the context of this in a constructor using bind(). More on this here

I did what you said but it did not work. its still returning the same error as before. I see in the code I first provided I mistakenly called fetch 2x Ive edited that out. The code I now have is:

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

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

So i disagree w what you say and I was using an arrow function to begin w so I shouldnt have to worry about binding this
The other thing is that when I change it to instead
<button onClick={console.log('hi')}>Click Me</button>
THen the app renders successfully but other components are logging the message to the console and its logging many more messages than I would expect it to.

regarding this. I went back in the curriculum and found this:

The way to do it is to place any api calls inside of the componentdidmout() it says:

When you call an API in this method, and set your state with the data that the API returns, it will automatically trigger an update once you receive the data.

The problem is the way this guy does it he is using state hooks and effects that were not covered in fcc curriculum. here is the file Im referring to:
mapbox react demo markers using static json NO api call

You are right, I am sorry. It was late and i was tired and i didn’t read your code carefully, so i broke the cardinal rule of trying to help - YOU SHALL NOT HARM :smiley:
I am glad you found a way to solve this, peace :slight_smile: