How to resolve React console warnings about unique `key` props in components?

Dash Python
1

After opening up the console in the browser dev tools while working on a Dash app, I noticed I was getting the following warning:

Warning: Each child in a list should have a unique "key" prop. See https://fb.me/react-warning-keys for more information.

I see that previously this has issue has popped up in the DataTable component. In my case, it’s associated with a list of html.Trelements in an html.Table table I’m creating myself.

After looking at the React docs, it seems fairly clear that React wants each child in a list of components to have a unique key prop compared to each of its siblings. The Dash docs indicates that each Dash component exposes a key attribute, so I went and explicitly set unique values in all my lists of Dash components.

However I’m now getting the following warning in the console:

Warning: Fr: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://fb.me/react-special-props)

So I’m a little bit confused here. React wants to to add unique keys, but then it’s unhappy when I do. Is Dash perhaps setting the key attribute as a prop on the generated component as opposed to the relevant element inside the component?

I’m not that familiar with React, so I don’t know what the implications of these warnings are. My app appears to be working fine, so I suspect it’s not an issue for correct functioning. However I really want to be able to resolve these warnings and clear up the console, as otherwise anyone on my team who’s working on this app is going to keep seeing them when I open up the console and think that somethings broken and also have to wade through them when there are actual errors that need resolving.

It would be great to get some guidance from the Dash devs on how to address these warnings properly. I notice that there are a few other people that have been asking the same question for a while now but no solutions have popped up.

2

@nedned , I haven’t been able to reproduce this issue myself running dash==2.3.1 so I wonder if maybe the errors can be resolved by switching the version of dash being used?

If not, can you paste a minimum example in this thread so I can have a look? My attempt runs without any console warnings in Chrome v100 on ubuntu 20.04.

import dash
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Table([
        html.Thead(
            html.Tr([
                html.Th('month'),
                html.Th('Savings'),
            ]),
            ),
        html.Tbody([
            html.Tr([
                html.Td('January'),
                html.Td('$100'),
            ]),
            html.Tr([
                html.Td('Febuary'),
                html.Td('$100'),
            ]),
        ])
    ])
])

if __name__ == '__main__':
    app.run_server(debug=True, port=8092)
2 Likes
3

Oh interesting. Thanks so much for taking some time to investigate @michaelbabyn !

I’ll have ago at running the minimal example in my environment and seeing if I get the problem and will report back :slight_smile:

4

Hey @michaelbabyn, I also couldn’t get your minimal example to throw the warning. So after digging in again, I realised the warning wasn’t actually being thrown by the table I built myself, it was being thrown by the DataTable component. Sorry about that!

I can give you a minimal example this time. It looks like it’s triggered by setting presentation of columns to markdown:

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)
1 Like
5

Thanks for the example, @nedned . It looks like this is a case that was overlooked when [BUG] react-dom: Each child in a list should have a unique "key" prop · Issue #1433 · plotly/dash · GitHub was initially fixed but I updated that issue with this example so hopefully it gets resolved in a subsequent dash release

2 Likes
6

ah well there you go. thanks heaps @michaelbabyn!

7

Added a comment to #1433 as I am seeing this warning in the example code:

Thanks