Skip to content

fix(geo): fix React unique-key warning in Choropleth legends - #2845

Open
aloktomarr wants to merge 2 commits into
plouc:masterfrom
aloktomarr:fix/choropleth-legends-key-2801
Open

aloktomarr wants to merge 2 commits into
plouc:masterfrom
aloktomarr:fix/choropleth-legends-key-2801

Conversation

@aloktomarr

Copy link
Copy Markdown
Contributor

Closes #2801

Problem

<ResponsiveChoropleth> / <Choropleth> with a legends prop logs a React "Each child in a list should have a unique key prop" warning (reported under React 19). The stack trace points at the nested Array.map calls in Choropleth.

Root cause

In Choropleth, layers.map(...) renders each layer. The features and graticule layers return keyed elements (<Fragment key="features">, <GeoGraticule key="graticule">), but the legends layer returned a bare legends.map(...) array with no keyed wrapper — so it's the odd one out.

Fix

Wrap the legends layer in a keyed <Fragment key="legends">, exactly like the features layer. Rendered output is unchanged; the key warning is resolved.

Testing

Added packages/geo/tests/Choropleth.test.js, which renders a Choropleth with a legend and asserts the legend renders and no React key warning is logged.

The legends layer returned a bare legends.map array, unlike the features and graticule layers which return keyed elements. Under React 19 this triggers a missing-key warning. Wrap the legends layer in a keyed Fragment so it matches the other layers. Closes plouc#2801.
@aloktomarr

Copy link
Copy Markdown
Contributor Author

The warning comes from the legends layer in Choropleth: it returns a bare legends.map(...) array, while the features and graticule layers return keyed elements. I've opened a PR that wraps the legends layer in a keyed like the others, which removes the warning. Added a test too.

@plouc

plouc commented Jul 21, 2026

Copy link
Copy Markdown
Owner

@aloktomarr, tests are failing.

@aloktomarr

Copy link
Copy Markdown
Contributor Author

Sorry my test had issues.
it looked up the legend with wrapper.find('BoxLegendSvg') (matching by the string name). That works when tests run against the source, but in CI the packages are built first, and the build doesn't keep the BoxLegendSvg display name so the lookup returned 0 and the assertion failed.

Fix (just the test, the Choropleth.js change is unchanged):

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Missing unique key prop in Choropleth legends (React 19)

2 participants