key prop should be defined at each element inside the children of a React element

• REACT_MISSING_KEY_PROP
• Code Quality
• Medium
• react

This rule applies when key prop is missing at each element inside the children of a React element.

In React, rendering is optimized using React's diff algorithm when updating DOM tree.
If key prop is missing in each React element when recursing on children of a DOM node, render performance will not be optimized because the diff algorithm based on key prop cannot be used.

Also in this case, React will output a warning message.

Noncompliant Code Example

import React from 'react';

export class Hello extends React.Component {
  render() {
    const childs = this.props.greetings.map((greeting) => <li value={greeting.name}>{greeting.name}</li>); // REACT_MISSING_KEY_PROP alarm

    return (
      <ul>
        {childs}
      </ul>
    );
  }
}

Compliant Code Example

import React from 'react';

export class Hello extends React.Component {
  render() {
    const childs = this.props.greetings.map((greeting) => <li key={greeting.key} value={greeting.name}>{greeting.name}</li>);

    return (
      <ul>
        {childs}
      </ul>
    );
  }
}

Version

This rule was introduced in DeepScan 1.3.0-beta.

See

• Key prop

• React Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of Hello. See https://fb.me/react-warning-keys for more information.