Keys in react

suggest change

Versions

[{“Name”:“0.3.0”,“GroupName”:null},{“Name”:“0.4.0”,“GroupName”:null},{“Name”:“0.5.0”,“GroupName”:null},{“Name”:“0.8.0”,“GroupName”:null},{“Name”:“0.9.0”,“GroupName”:null},{“Name”:“0.10.0”,“GroupName”:null},{“Name”:“0.11.0”,“GroupName”:null},{“Name”:“0.12.0”,“GroupName”:null},{“Name”:“0.13.0”,“GroupName”:null},{“Name”:“0.14.0”,“GroupName”:null},{“Name”:“15.0.0”,“GroupName”:null},{“Name”:“15.1.0”,“GroupName”:null},{“Name”:“15.2.0”,“GroupName”:null},{“Name”:“15.2.1”,“GroupName”:null},{“Name”:“15.3.0”,“GroupName”:null},{“Name”:“15.3.1”,“GroupName”:null},{“Name”:“15.3.2”,“GroupName”:null},{“Name”:“15.4.0”,“GroupName”:null},{“Name”:“15.4.1”,“GroupName”:null},{“Name”:“15.4.2”,“GroupName”:null},{“Name”:“15.5.0”,“GroupName”:null}]

Introduction

Keys in react are used to identify a list of DOM elements from the same hierarchy internally.

So if you are iterating over an array to show a list of li elements, each of the li elements needs a unique identifier specified by the key property. This usually can be the id of your database item or the index of the array.

Remarks

Using the array index as a key is generally not recommended when the array is going to change over time. From the React Docs:

As a last resort, you can pass item’s index in the array as a key. This can work well if the items are never reordered, but reorders will be slow.

A good example about this: https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318

Feedback about page:

Feedback:
Optional: your email if you want me to get back to you:


Keys in React:
*Keys in react

Table Of Contents