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}