React keys with string and index

Question

As per React docs, they are not recommending to use the key as an index. but is there any issue with using the index and a string value. like below one,


transactionDetail.map((item,index) => <div key={`transaction-{index}`}>{trName}</div>)

is there any issue with using like this?

This approach is the same as using bare index. You are just fooling linter. Key should be something related to the item not to its position in array. — Yury Tarabanko
– Yury Tarabanko, Commented Jun 5, 2020 at 10:21
But is there any problem, like I am using a 'transaction' which is unique right? — Rahul N R
– Rahul N R, Commented Jun 5, 2020 at 10:29
There might be a problem if at some point you need to insert something in the middle of the array. — Yury Tarabanko
– Yury Tarabanko, Commented Jun 5, 2020 at 10:44

hendrixchord · Accepted Answer · 2020-06-05 10:34:32Z

2

Unless you're not going to be mutating the array i.e. transactionDetail & the order of the array won't change on every re-render it's fine to use index as a key.

Else if it is going change or you'll be mutating it then you should use some value unique to each item inside transactionDetail

edited Jun 5, 2020 at 10:34

answered Jun 5, 2020 at 10:21

hendrixchord

5,5045 gold badges33 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Rahul N R Over a year ago

why can't I cannot use {transaction-{index}}, if array changing ?

hendrixchord Over a year ago

I've mentioned above , If the array won't change it's fine to use {transaction-{index}}

Rahul N R Over a year ago

Yeah, that I got, but my concern is what if I am mutating the array? why this method is not recommendable?

hendrixchord Over a year ago

Then react won't know what DOM elements to re-render & what not to, keys are way for React to identity that with the virtual DOM. If there are duplicate keys then it will only render the first item and won't render the remaining duplicate items.

hendrixchord Over a year ago

dev.to/jtonzing/… maybe this article may help you.

Dostonbek Oripjonov · Accepted Answer · 2020-06-05 10:24:11Z

0

So, I think there is no problem if there are no other element with same index. Because, key is used by virtual-dom to define elements which have changed to re-render component. It may produce problem if there are elements with same index.

answered Jun 5, 2020 at 10:24

Dostonbek Oripjonov

1,6941 gold badge21 silver badges30 bronze badges

Collectives™ on Stack Overflow

React keys with string and index

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related