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

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.

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

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

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

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?

Closed by #1778

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

@michaelbabyn

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

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

@BaconEggsRL

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

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.

Navigation Menu

Repository navigation

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

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

themegaphoenix commented on Nov 27, 2020

chriddyp commented on Nov 27, 2020

themegaphoenix commented on Nov 27, 2020

tashrifbillah commented on Nov 27, 2020

antoinerg commented on Sep 30, 2021

michaelbabyn commented on May 2, 2022

alexjercan commented on Jul 12, 2023

BaconEggsRL commented on Jan 9, 2024

Coding-with-Adam commented on Jan 9, 2024

BaconEggsRL commented on Jan 9, 2024

Coding-with-Adam commented on Jan 12, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions