Make MapWithMarker a functional component

AstroPlant · Jul 25, 2023 · 3954a24 · 3954a24
1 parent ef22e37
commit 3954a24
Showing 1 changed file with 21 additions and 23 deletions.
diff --git a/astroplant-frontend/src/Components/MapWithMarker.tsx b/astroplant-frontend/src/Components/MapWithMarker.tsx
@@ -6,28 +6,26 @@ type Props = {
  location: { latitude: number; longitude: number };
 };
 
-export default class MapWithMarker extends React.Component<
- React.PropsWithChildren<Props>
-> {
- render() {
- const { location } = this.props;
- return (
- <MapContainer
- center={[location.latitude, location.longitude]}
- zoom={10}
- style={{ height: "45em" }}
+export default function MapWithMarker({
+ location,
+ children,
+}: React.PropsWithChildren<Props>) {
+ return (
+ <MapContainer
+ center={[location.latitude, location.longitude]}
+ zoom={10}
+ style={{ height: "45em" }}
+ >
+ <TileLayer
+ url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+ attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+ />
+ <Marker
+ icon={MarkerIcon}
+ position={[location.latitude, location.longitude]}
  >
- <TileLayer
- url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
- attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
- />
- <Marker
- icon={MarkerIcon}
- position={[location.latitude, location.longitude]}
- >
- {this.props.children && <Popup>{this.props.children}</Popup>}
- </Marker>
- </MapContainer>
- );
- }
+ {children && <Popup>{children}</Popup>}
+ </Marker>
+ </MapContainer>
+ );
 }