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';

class Hello extends React.Component {
    render() {
        var 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';

class Hello extends React.Component {
    render() {
        var 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