Duplicate key error in console on proposal detail page

[reefdog]

Note: This only currently shows up in when running in dev mode locally. I expect that's because only in dev are the effects run twice.

When going to any proposal detail page in a local dev instance of the app, the console shows a duplicate key error around rendering the tbody on the ProposalTable. The keys being complained about are 29 and 9.

Click to view console message…

Warning: Encountered two children with the same key, `29`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
tbody
TableBody@http://localhost:3000/static/js/bundle.js:3233:7
table
Table@http://localhost:3000/static/js/bundle.js:3159:7
ProposalTable@http://localhost:3000/static/js/bundle.js:2496:7
div
PanelBody@http://localhost:3000/static/js/bundle.js:1030:7
div
Panel@http://localhost:3000/static/js/bundle.js:887:7
ProposalDetailPanel@http://localhost:3000/static/js/bundle.js:1753:7
div
PanelGridItem@http://localhost:3000/static/js/bundle.js:1613:7
ProposalDetailPanelLoader@http://localhost:3000/static/js/bundle.js:4384:7
div
PanelGrid@http://localhost:3000/static/js/bundle.js:1542:7
ProposalDetailLoader@http://localhost:3000/static/js/bundle.js:4449:77
OidcSecure@http://localhost:3000/static/js/bundle.js:5327:7
RenderedRoute@http://localhost:3000/static/js/bundle.js:48638:7
Routes@http://localhost:3000/static/js/bundle.js:49188:7
main
AppMain@http://localhost:3000/static/js/bundle.js:258:7
div
App
Router@http://localhost:3000/static/js/bundle.js:49130:7
BrowserRouter@http://localhost:3000/static/js/bundle.js:47377:7
OidcSession@http://localhost:3000/static/js/bundle.js:5092:7
OidcRoutes@http://localhost:3000/static/js/bundle.js:6144:7
Switch@http://localhost:3000/static/js/bundle.js:5125:7
OidcProvider@http://localhost:3000/static/js/bundle.js:5154:7 451:2367:25
    overrideMethod 451:2367
    React 13
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
    (Async: EventHandlerNonNull)
    js scheduler.development.js:571
    js scheduler.development.js:633
    factory react refresh:6
    Webpack 24
Warning: Encountered two children with the same key, `9`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
tbody
TableBody@http://localhost:3000/static/js/bundle.js:3233:7
table
Table@http://localhost:3000/static/js/bundle.js:3159:7
ProposalTable@http://localhost:3000/static/js/bundle.js:2496:7
div
PanelBody@http://localhost:3000/static/js/bundle.js:1030:7
div
Panel@http://localhost:3000/static/js/bundle.js:887:7
ProposalDetailPanel@http://localhost:3000/static/js/bundle.js:1753:7
div
PanelGridItem@http://localhost:3000/static/js/bundle.js:1613:7
ProposalDetailPanelLoader@http://localhost:3000/static/js/bundle.js:4384:7
div
PanelGrid@http://localhost:3000/static/js/bundle.js:1542:7
ProposalDetailLoader@http://localhost:3000/static/js/bundle.js:4449:77
OidcSecure@http://localhost:3000/static/js/bundle.js:5327:7
RenderedRoute@http://localhost:3000/static/js/bundle.js:48638:7
Routes@http://localhost:3000/static/js/bundle.js:49188:7
main
AppMain@http://localhost:3000/static/js/bundle.js:258:7
div
App
Router@http://localhost:3000/static/js/bundle.js:49130:7
BrowserRouter@http://localhost:3000/static/js/bundle.js:47377:7
OidcSession@http://localhost:3000/static/js/bundle.js:5092:7
OidcRoutes@http://localhost:3000/static/js/bundle.js:6144:7
Switch@http://localhost:3000/static/js/bundle.js:5125:7
OidcProvider@http://localhost:3000/static/js/bundle.js:5154:7 451:2367:25
Warning: Encountered two children with the same key, `29`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
tbody
TableBody@http://localhost:3000/static/js/bundle.js:3233:7
table
Table@http://localhost:3000/static/js/bundle.js:3159:7
ProposalTable@http://localhost:3000/static/js/bundle.js:2496:7
div
PanelBody@http://localhost:3000/static/js/bundle.js:1030:7
div
Panel@http://localhost:3000/static/js/bundle.js:887:7
ProposalDetailPanel@http://localhost:3000/static/js/bundle.js:1753:7
div
PanelGridItem@http://localhost:3000/static/js/bundle.js:1613:7
ProposalDetailPanelLoader@http://localhost:3000/static/js/bundle.js:4384:7
div
PanelGrid@http://localhost:3000/static/js/bundle.js:1542:7
ProposalDetailLoader@http://localhost:3000/static/js/bundle.js:4449:77
OidcSecure@http://localhost:3000/static/js/bundle.js:5327:7
RenderedRoute@http://localhost:3000/static/js/bundle.js:48638:7
Routes@http://localhost:3000/static/js/bundle.js:49188:7
main
AppMain@http://localhost:3000/static/js/bundle.js:258:7
div
App
Router@http://localhost:3000/static/js/bundle.js:49130:7
BrowserRouter@http://localhost:3000/static/js/bundle.js:47377:7
OidcSession@http://localhost:3000/static/js/bundle.js:5092:7
OidcRoutes@http://localhost:3000/static/js/bundle.js:6144:7
Switch@http://localhost:3000/static/js/bundle.js:5125:7
OidcProvider@http://localhost:3000/static/js/bundle.js:5154:7 451:2367:25
Warning: Encountered two children with the same key, `9`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
tbody
TableBody@http://localhost:3000/static/js/bundle.js:3233:7
table
Table@http://localhost:3000/static/js/bundle.js:3159:7
ProposalTable@http://localhost:3000/static/js/bundle.js:2496:7
div
PanelBody@http://localhost:3000/static/js/bundle.js:1030:7
div
Panel@http://localhost:3000/static/js/bundle.js:887:7
ProposalDetailPanel@http://localhost:3000/static/js/bundle.js:1753:7
div
PanelGridItem@http://localhost:3000/static/js/bundle.js:1613:7
ProposalDetailPanelLoader@http://localhost:3000/static/js/bundle.js:4384:7
div
PanelGrid@http://localhost:3000/static/js/bundle.js:1542:7
ProposalDetailLoader@http://localhost:3000/static/js/bundle.js:4449:77
OidcSecure@http://localhost:3000/static/js/bundle.js:5327:7
RenderedRoute@http://localhost:3000/static/js/bundle.js:48638:7
Routes@http://localhost:3000/static/js/bundle.js:49188:7
main
AppMain@http://localhost:3000/static/js/bundle.js:258:7
div
App
Router@http://localhost:3000/static/js/bundle.js:49130:7
BrowserRouter@http://localhost:3000/static/js/bundle.js:47377:7
OidcSession@http://localhost:3000/static/js/bundle.js:5092:7
OidcRoutes@http://localhost:3000/static/js/bundle.js:6144:7
Switch@http://localhost:3000/static/js/bundle.js:5125:7
OidcProvider@http://localhost:3000/static/js/bundle.js:5154:7 451:2367:25

Here is the section of code that generates the key error:

https://github.com/PhilanthropyDataCommons/data-viewer/blob/6383f93bfbaaeb84081cd40d26201c90adcc2026/src/components/ProposalTable.tsx#L61-L74

Not marking this as a bug until @jasonaowen has a change to weigh in / muse on it. I know this is only showing up on load in dev due to the effects-run-twice-in-dev React behavior, but I think the key error may be a symptom of a problem with how we choose our keys, perhaps?

[reefdog]

• This seems to start with proposal 425.
• The duplicate keys seem to come from the fields organization_phone and proposal_primary_contact_county

[reefdog]

@jasonaowen Do you have time to take a look at this? It's noisying up the console pretty bad, but mostly would seem to indicate we need to address… something!