Popup component not showing up in react app

Question

I use a popup component from react-map-gl. When the marker is clicked on, the selectedEvent in made true and a popup is supposed to display.

import React, { useState } from 'react';
import ReactMapGL, {Marker, Popup} from 'react-map-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
import data from "./data/historical-events.json";

function App() {
  const MAPBOX_TOKEN = process.env.REACT_APP_MAPBOX_TOKEN;
  const [selectedEvent, setSelectedEvent] = useState(null);
  console.info('mapbox token is ' + MAPBOX_TOKEN); 

  return (
    <ReactMapGL
      initialViewState={{
        latitude: 41.5801,
        longitude: -71.4774,
        zoom: 8
      }}
      style={{width: "100vw", height: "100vh"}}
      mapStyle="mapbox://styles/mapbox/streets-v9"
      mapboxAccessToken={MAPBOX_TOKEN}
      >
      {data.events.map(event =>(
        <Marker key={event.eventId} 
          latitude={event.coordinates[0]} 
          longitude={event.coordinates[1]}>
            <button className="marker-btn"
            onClick={e => {
              e.preventDefault();
              setSelectedEvent(event);
            }}>
            <img src={event.img} alt="event icon"/>
            </button>
        </Marker>
      ))}
  
      {selectedEvent ? (
        <Popup 
          latitude={selectedEvent.coordinates[0]} 
          longitude={selectedEvent.coordinates[1]}
          onClose={ ()=> { setSelectedEvent(null); }}>
          <div>
            {console.info("over here")}
            <p>{selectedEvent.eventDescription}</p>
          </div>
        </Popup>
      ) : null}
    </ReactMapGL>
  );
}

export default App;

I checked to make sure the tertiary operator works with the selected event. Yes it works and prints out console.info("over here") within the popup component.

Answer 1

Like mentioned in the comment you need a true or false value

Here is an example:

uselessState is the boolean that renders the pop up

return(
                    <>
                      <Marker
                        key={`Marker3:${key}`}
                        latitude={
                          event.multiEventLatitude
                            ? event.multiEventLatitude
                            : 0
                        }
                        longitude={
                          event.multiEventLongitude
                            ? event.multiEventLongitude
                            : 0
                        }
                      >
                        <button
                          key={`Button:${key}`}
                          className="marker-btn"
                          onClick={(e) => {
                            e.preventDefault();
                            setSelectedEvent(event);
                            setUselessState(!uselessState);
                          }}
                          onMouseEnter={(e) => {
                            e.preventDefault();
                            setSelectedEvent(event);
                            setUselessState(true);
                          }}

                          // onMouseLeave={e => {
                          //     e.preventDefault();
                          //     setSelectedEvent(null);
                          //     setUselessState(!uselessState);
                          // }}
                        >
                          <div className="marker-btn" key={`thePin${key}`}>
                            <FaMapMarkerAlt
                              fontSize={"1.85em"}
                              color={"green"}
                            />
                          </div>
                        </button>
                      </Marker>
                    </>
                  )

The pop up

{uselessState && (
          <Popup
            key={`PopUp:${selectedEvent ? selectedEvent.id : null}`}
            latitude={
              selectedEvent
                ? selectedEvent.event_links.data[0].attributes.linkLabel
                : 0
            }
            longitude={
              selectedEvent
                ? selectedEvent.event_links.data[0].attributes.linkUrl
                : 0
            }
            onClose={() => {
              setUselessState(false);
            }}
            closeOnMove={true}
            style={{ zIndex: 100000 }}
          >
            <div>{event}</div>
          </Popup>
        )}