[BUG] react-dom: Each child in a list should have a unique "key" prop

[tashrifbillah]

I experienced this issue in a bigger context but I found an easy way to reproduce it. Please run the Quickstart tutorial from https://dash.plotly.com/datatable

Screenshots

Describe your context
Windows 10 machine on both Edge and Chrome browsers

dash                   1.16.2
dash-core-components   1.12.1
dash-extensions        0.0.18
dash-html-components   1.1.1
dash-renderer          1.8.2
dash-table             4.10.1

Expected behavior

No warning.

Additional info
This issue might be related but does not appear to give a clear reproduction way which I did in the above.

[themegaphoenix]

Hi,
I am also having the same issue.
This pull request might be what we need:
plotly/dash-table#690

[chriddyp]

These are just warnings and can be ignored unless you've found a way that this effects the behavior of the table itself.

[themegaphoenix]

These are just warnings and can be ignored unless you've found a way that this effects the behavior of the table itself.

I understand, but nothing makes me happier than a clean console :). It should hopefully be resolved soon

[tashrifbillah]

I would love to test this PR. Two points--

• Is the PR from February? Seems a little old.
• How do I install just dash-table? I have always done pip install dash which had dash-table dependency. I can clone the dash master and try pip install . locally but how do I point to the PR for dash-table dependency?

[antoinerg]

Closed by #1778

[michaelbabyn]

reopening since it looks like this issue still appears when the presentation column attribute is set to markdown in any of the columns.

E.g see this simple example from the forum:

import dash_bootstrap_components as dbc
from dash import Dash, html, dash_table

import pandas as pd

df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/solar.csv")

app = Dash(__name__)

app.layout = dash_table.DataTable(
    df.to_dict("records"),
    [{"name": i, "id": i, "presentation": "markdown"} for i in df.columns],
)

if __name__ == "__main__":
    app.run_server(debug=True, port=8092)

It appears that this was an omission when markdown presentation mode was added because it doesn't have a key prop added whereas input and dropdown do

[alexjercan]

I have made the change you suggested @michaelbabyn and the example works without the console error.

[BaconEggsRL]

Hi--I am still getting this warning when running the example code here:
https://dash.plotly.com/dash-ag-grid/tooltips
Thoughts?

[Coding-with-Adam]

hi @BaconEggsRL
Can you please share the text message or an image of the warning you're getting?

[BaconEggsRL]

hi @BaconEggsRL Can you please share the text message or an image of the warning you're getting?

Sure:

Warning: Each child in a list should have a unique "key" prop.
Check the top-level render call using <div>. See https://reactjs.org/link/warning-keys for more information.

The warning above that (can't see in screenshot) is for "Invalid aria prop aria-description". Which can be fixed by using react 18 version. But the other warning for unique key is present no matter what.

The warning appears when you activate the custom tooltip.

Thanks

[Coding-with-Adam]

The warning is from ag-grid, It may be missing a key somewhere.
The aria-description is a new dom attribute, seems like it's not supported by earlier react version which is to be expected.

I think you can disregard the warning unless it's impacting the app performance.