34 lines
886 B
Plaintext
34 lines
886 B
Plaintext
== Why is this an issue?
|
|
|
|
React expects a unique identifier for performance optimizations. Using generated values like `Math.random()` or `Date.now()` is discouraged as it would force a re-render every time and might also provoke bugs if values collide.
|
|
|
|
Instead, use a unique attribute like an ID or a combination of attributes.
|
|
|
|
=== Noncompliant code example
|
|
|
|
[source,javascript]
|
|
----
|
|
function generateButtons(props) {
|
|
return props.buttons.map((button, index) => {
|
|
<Button key={Math.random()}>{button.number}</Button>
|
|
});
|
|
}
|
|
----
|
|
|
|
=== Compliant solution
|
|
|
|
[source,javascript]
|
|
----
|
|
function generateButtons(props) {
|
|
return props.buttons.map((button, index) => {
|
|
<Button key={button.number}>{button.number}</Button>
|
|
});
|
|
}
|
|
----
|
|
|
|
== Resources
|
|
|
|
* https://reactjs.org/docs/reconciliation.html#recursing-on-children[Recursing On Children] - React API reference
|
|
* S6477
|
|
* S6479
|