react/no-typos

React finds componentDidMount, propTypes, and defaultProps by name. If you write componentDidmount or PropTypes, nothing fails. React never calls the method and never checks the props.

The rule reports four kinds of mistakes in a component:

• A lifecycle method, such as componentDidMount or shouldComponentUpdate, with the wrong capitalization.
• getDerivedStateFromProps without static.
• propTypes, contextTypes, childContextTypes, or defaultProps with the wrong capitalization.
• A type that the prop-types package doesn't have, such as PropTypes.boolean, or anything other than .isRequired after a type. This only works if the file imports prop-types or react.

It also reports import "react" and import "prop-types", which don't import any names.

Configure

Off by default. To turn it on:

[lint.rules]
"react/no-typos" = "error" # or "warn"

Examples

Reported:

class Clock extends React.Component {
  static DefaultProps = { interval: 1000 };

  getDerivedStateFromProps(props) {
    return { interval: props.interval };
  }

  componentDidmount() {
    this.start();
  }
}

import PropTypes from "prop-types";

class Clock extends React.Component {
  static propTypes = {
    running: PropTypes.boolean,
    interval: PropTypes.number.isrequired,
  };
}

Not reported:

import PropTypes from "prop-types";

class Clock extends React.Component {
  static propTypes = {
    running: PropTypes.bool,
    interval: PropTypes.number.isRequired,
  };

  static defaultProps = { interval: 1000 };

  static getDerivedStateFromProps(props) {
    return { interval: props.interval };
  }

  componentDidMount() {
    this.start();
  }
}