== 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