0

What is the best way to define "KEY" in React when creating a list with map function from an array which containing no unique ID or any unique fields. I don't want to go with index because If later any item remove or added in array previous array index will be change that does not helps React to keep track listing DOM nodes. So how can I generate or define "KEY"(unique KEY) for DOM nodes?

Subhajit Panja
  • 1,230
  • 1
  • 9
  • 22

2 Answers2

1

What not to do

You should not be using index of the map for you Key, its an anti-pattern, it may lead to unpredictable results.

Please check this https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318

Right approach

You should be using proper unique-id for your Key, like a DB id or some unique-id.

This Key is used internally to identify the DOM elements to render and not to render again.

Praveen Rao Chavan.G
  • 2,772
  • 3
  • 22
  • 33
1

If possible, convert it to an array of objects and have one of the key/value pairs be the id... Here is a little helper function to generate random ids:

const generateId = () => Math.random().toString(36).substr(2, 10)

Then use this function something like this:

const arr = [{ id: generateId(), name: 'Bob' }, { id: generateId(), name: 'Jane' }, { id: generateId(), name: 'Jack' }]
SakoBu
  • 3,972
  • 1
  • 16
  • 33
  • your are showing an awesome example to solve it. I also thinking a similar way but instead of pushing extra fields in the array Can I genarate key like below process. const listItems = numbers.map((number) =>
  • {number}
    • ); – Subhajit Panja Mar 22 '19 at 06:12
  • is it possible ? – Subhajit Panja Mar 22 '19 at 06:14
  • I'm thinking now you are right because If generate unique key like my way then if array updated then previous key will be changed also. It's also not helpful for React your previous way is the right. – Subhajit Panja Mar 22 '19 at 06:26
  • 1
    @SubhajitPanja: I'm sorry but do not use this solution as pointed out here https://stackoverflow.com/a/43892905/9816472 – Isaac Mar 22 '19 at 06:27
  • 1
    it will always force react to re-render each item in the list, even when this is not required. This a very bad solution as it greatly impacts performance. Not to mention that one cannot exclude the possibility of a key collision in the event that Math.random() produces the same number twice. – Isaac Mar 22 '19 at 06:28
  • @Isaac Yes - good point... In the render it is problematic... Tried but no dice... – SakoBu Mar 22 '19 at 06:29
  • Hey @Isaac getting more confuse github.com/thearnica/react-uid not working at all I tried in codepen example const dataLines = [ { title: "One" }, { title: "Two" }, { title: "Three", noId: true } ]; to const dataLines = [ { title: "Zero" }, { title: "One" }, { title: "Two" }, { title: "Three", noId: true } ]; key also changed https://codesandbox.io/s/kkmwr6vv47 – Subhajit Panja Mar 22 '19 at 06:48
  • @Isaac above anwser is fine for me ? because SakoBu re-edited his anwser I think That's also fine for me with your this suggestion (stackoverflow.com/a/43892905/9816472) componentWillMount() { let rows = this.props.rows.map(item => { return {uid: SomeLibrary.generateUniqueID(), value: item}; }); } ... {rows.map((row) => { return ; })} – Subhajit Panja Mar 22 '19 at 06:55
  • 1
    @SubhajitPanja: Yes you can follow this updated answer. – Isaac Mar 22 '19 at 06:57