Inversion of logic

svgmap/src/components/map/Map.tsx

@@ -32,13 +32,6 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
   const [shift, setShift] = useState({ x: -boardSize / 2, y: -boardSize / 2 });
   const [zoom, setZoom] = useState(1);
 
-  const [tiledLayerKey, setTiledLayerKey] = useState({
-    provider: 'osm',
-    zoomLevel: 16,
-    x: 33488,
-    y: 23939,
-  });
-
   const addShift = (deltaShift: { x: number; y: number }) => {
     setShift({ x: shift.x + deltaShift.x, y: shift.y + deltaShift.y });
   };
@@ -102,9 +95,7 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
               shift={shift}
               zoom={zoom}
               tileSize={256}
-              key='tiled-layers'
               numberOfZoomLevels={5}
-              tiledLayerKeyState={[tiledLayerKey, setTiledLayerKey]}
             />
             <circle key='circle' cx='50' cy='50' r='50' />,
           </>

svgmap/src/components/map/TiledLayersStack.tsx

@@ -1,6 +1,6 @@
-import react from 'react';
+import react, { useState } from 'react';
 import TiledLayer from './TiledLayer';
-import { TileKey, tileKeyToString } from './Map';
+import { tileKeyToString } from './Map';
 
 interface Point {
   x: number;
@@ -14,7 +14,6 @@ interface TiledLayersStackProperties {
   zoom: number;
   tileSize: number;
   numberOfZoomLevels?: number;
-  tiledLayerKeyState: [TileKey, (tiledLayerKey: TileKey) => void];
 }
 
 const TiledLayersStack: react.FC<TiledLayersStackProperties> = (
@@ -22,7 +21,12 @@ const TiledLayersStack: react.FC<TiledLayersStackProperties> = (
 ) => {
   console.log(`Rendering TiledLayersStack`);
 
-  const [tiledLayerKey, setTiledLayerKey] = props.tiledLayerKeyState;
+  const [tiledLayerKey, setTiledLayerKey] = useState({
+    provider: 'osm',
+    zoomLevel: 16,
+    x: 33488,
+    y: 23939,
+  });
 
   const numberOfZoomLevels =
     props.numberOfZoomLevels === undefined