Re the below code:
I would like to know how to convert the uses of useState and useEffect to the old methods of setState and the useEffect method off adding and cleaning up event listeners back to componentdidmount and componentwillunmount, Ive read the documentation on useState and useEffect, it explains very clearly what its used for, it did help give me an understanding of these, but not clearly enough for me to break down this project.
export default function App() {
const [viewport, setViewport] = useState({
latitude: 45.4211,
longitude: -75.6903,
width: "100vw",
height: "100vh",
zoom: 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);
};
}, []);
return (
<div>
<ReactMapGL
{...viewport}
mapboxApiAccessToken={REACT_APP_MAPBOX_TOKEN}
mapStyle=""
onViewportChange={viewport => {
setViewport(viewport);
}}
>
{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>
);
}