org.sonar.l10n.javascript.rules.javascript.S6477.html Maven / Gradle / Ivy
React expects a unique identifier key in list components to optimize rendering. Missing keys will negatively impact performance and
can bring your application to a halt when there are enough elements. Avoid Array indexes since they are not stable. Instead, use a unique
attribute like an ID or a combination of attributes.
Noncompliant Code Example
function Blog(props) {
return (
<ul>
{props.posts.map((post) =>
<li>
{post.title}
</li>
)}
</ul>
);
}
Compliant Solution
function Blog(props) {
return (
<ul>
{props.posts.map((post) =>
<li key={post.id}>
{post.title}
</li>
)}
</ul>
);
}
See
- Recursing On Children - React API reference
- {rule:javascript:S6479}
- {rule:javascript:S6486}