Best Practice for React Sibling Keys

JavaScript
1

Hey everyone, I just started working on the new React curriculum and got to the “Give Sibling Elements a Unique Key Attribute” lesson. I was wondering what others with more React experience would recommend as a best-practice for creating a unique key for each list item in this kind of environment.

2

Normally a UUID, which completely avoids any possible issues. Just in actual apps though, using the index is generally fine for learning and prototypes, you just might (very occasionally) get strange behaviour. You’d generally use this package to generate them, eg:

<React.fragment>
 { myArrayOfStuff.map(something => <div key={  uuidv4() }>{ something }</div>)
</React.fragment>
4 Likes
3

Thanks! I’ll keep that in mind for real projects then.

4

Was on the challenge referenced by @jgibson02 and I ended up here. Main issue was knowing where to put the key, your example helped a lot.

And does one have to download the uuid as a dependency or is it built into react?