Open
Description
Problem
When trying to render markers on a map a TypeError
can be encountered if the coordinate is not on the map.
Expectation
The render would fail gracefully, possibly emitting a warning to the console, instead of a cryptic TypeError
about restructuring.
...
<div className='NationalParkMap'>
<ComposableMap projection="geoAlbersUsa">
<Geographies geography={GeographyJson}>
{({ geographies }) => geographies.map(geography =>
<>
{geographies.map(geography => (
<Geography key={geography.rsmKey}
stroke="#BBB"
geography={geography}
fill="#333"/>
))}
</>
)}
</Geographies>
{Parks.map(({ name, coordinates}) => (
<Marker coordinates={coordinates}>
<circle r={8} fill="#F53" stroke="#FFF" strokeWidth={2} />
<text textAnchor="middle" style={{ fontFamily: "system-ui", fill: "#5D5A6D" }}>
{name}
</text>
</Marker>
))}
</ComposableMap>
</div>
</div>
Yields
Uncaught TypeError: Invalid attempt to destructure non-iterable instance
at l (index.umd.js:1:1)
at S (index.umd.js:1:1)
at renderWithHooks (react-dom.development.js:14985:1)
at mountIndeterminateComponent (react-dom.development.js:17811:1)
at beginWork (react-dom.development.js:19049:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
at invokeGuardedCallback (react-dom.development.js:4056:1)
at beginWork$1 (react-dom.development.js:23964:1)
at performUnitOfWork (react-dom.development.js:22776:1)
at workLoopSync (react-dom.development.js:22707:1)
at renderRootSync (react-dom.development.js:22670:1)
at performSyncWorkOnRoot (react-dom.development.js:22293:1)
at react-dom.development.js:11327:1
at unstable_runWithPriority (scheduler.development.js:468:1)
at runWithPriority$1 (react-dom.development.js:11276:1)
at flushSyncCallbackQueueImpl (react-dom.development.js:11322:1)
at flushSyncCallbackQueue (react-dom.development.js:11309:1)
at flushSync (react-dom.development.js:22467:1)
at Object.scheduleRoot (react-dom.development.js:24444:1)
at react-refresh-runtime.development.js:284:1
at Set.forEach (<anonymous>)
at Object.performReactRefresh (react-refresh-runtime.development.js:263:1)
at RefreshUtils.js:62:1
Metadata
Metadata
Assignees
Labels
No labels