False positive for react/prop-types props validation (stateless component)

I’m getting an error for a prop missing in props validation, when the prop is included the prop-types, similar to #258.

• eslint version v3.2.2
• eslint-plugin-react v6.0.0

Here’s the error:

% eslint test.js

/Users/lauren/Projects/eslint-error/test.js
  10:31  error  'onChange' is missing in props validation  react/prop-types

✖ 1 problem (1 error, 0 warnings)

Here’s the code:

import React       from "react";
import Slider      from "./slider";

const StatelessCell = props =>
    <div>
        <a href="#" onClick={e => props.onChange(e)} />
        <Slider value={props.severity}
            onClick={severity => props.onChange({severity})} />
        <Slider value={props.severity}
            onClick={severity => props.onChange({severity})} />
    </div>;

StatelessCell.PropTypes = {
    severity: React.PropTypes.number,
    onChange: React.PropTypes.func.isRequired,
};

export default StatelessCell;

Here’s my .eslintrc.json:

{
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true
        },
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "no-console": [
            "error",
            {
                "allow": ["warn", "error"]
            }
        ],
        "indent": [
            "error",
            "tab",
            {
                "SwitchCase": 1
            }
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "double"
        ],
        "semi": [
            "error",
            "always"
        ],
        "no-unused-vars": [
            "error",
            {
                "vars": "all",
                "argsIgnorePattern": "^_$"
            }
        ],
        "comma-dangle": [
            "error",
            "always-multiline"
        ],
        "no-shadow": [
            "error", { "hoist": "never" }
        ]
    }
}

[simonsmith]

I get the same, and also a displayName missing error too:

import React, {
  PropTypes,
} from 'react';

import {
  NavigationExperimental,
  StyleSheet,
  View,
} from 'react-native';

import Tab from './tab';
import withNavigate from './with-navigate';

const {
  PropTypes: NavigationPropTypes,
} = NavigationExperimental;

const TabList = withNavigate(props => {
  return (
    <View style={styles.tabs}>
      {props.navigationState.routes.map(renderTab(props))}
    </View>
  );
});

const renderTab = props => {
  return (route: Object, index: number): ReactElement => {
    return (
      <Tab
        key={route.key}
        route={route}
        selected={props.navigationState.index === index}
      />
    );
  };
};

TabList.displayName = 'TabList';
TabList.propTypes = {
  navigationState: NavigationPropTypes.navigationState.isRequired,
  navigate: PropTypes.func.isRequired,
};

const styles = StyleSheet.create({
  tabs: {
    flex: 1,
    flexDirection: 'row',
  },
});

export default TabList;

I’m using the react/recommended config

[ljharb]

Please do not comment with “+1”, it adds noise and adds no value - please show your support by adding a reaction emoji to the original post. I’ll delete all the existing +1 comments, and any future ones.

Thanks for participating!