bug: react element key hardcoded to 100 (?!?), index keys used frequently

Observe the following snippet of code from index.tsx:

<tr key={Math.round(100).toString()}>

Now consider the following sandbox example: https://codesandbox.io/embed/proud-firefly-wlko9

This is a serious bug.

This example demonstrates that when there’s a row that has a key that’s based off of the index two react elements will exist with the same key, which, of course, causes react to go crazy. In my specific app, which datafetches the thing that’s being diffed, it results in the row being duplicated every few seconds (such that if you have the app open for 60 seconds, you might have 60 duplicated rows).

React depends on keys being unique among siblings.

Furthermore, it’s widely considered an antipattern to use array indexes as keys [sources: 1, 2, 3, 4], something that’s done very frequently in this project [source 1, 2, 3, 4, 5, 6].

I understand that this is a tough cookie to crack because with a library like this you don’t have very many guarantees. You can’t exactly force the end user to provide an id for every row/column/whatever. To solve this problem in the past for similar problems I’ve used some of the solutions suggested in the linked resources on this antipattern above (e.g. shortid).

This bug was introduced here.

[praneshr]

Fixed in v2.0.3

[praneshr]

Hi @dimitropoulos, thanks for pointing this out. This is a serious bug. I meant to write Math.random().toString(). I’ll release a patch by end of this week.