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

[dimitropoulos]

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.

[dimitropoulos]

As an aside @praneshr I am curious why you wrote Math.round(100).toString(), which, so far as I can tell, is logically equivalent to "100".

[dimitropoulos]

Also.. for balance: Thank you for open sourcing this project. From the search I did for all the competition's offerings I found this to be the best.

[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.

[praneshr]

Fixed in v2.0.3

[dimitropoulos]

I think @praneshr something happened with the npm release: lib/index.js doesn't contain the fix in v2.0.3