React eslint error missing in props validation

Question

I have the next code, eslint throw:

react/prop-types onClickOut; is missing in props validation

react/prop-types children; is missing in props validation

propTypes was defined but eslint does not recognize it.

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

class IxClickOut extends Component {
  static propTypes = {
    children: PropTypes.any,
    onClickOut: PropTypes.func,
  };

 componentDidMount() {
    document.getElementById('app')
      .addEventListener('click', this.handleClick);
  }

  componentWillUnmount() {
    document.getElementById('app')
      .removeEventListener('click', this.handleClick);
  }

  handleClick = ({ target }: { target: EventTarget }) => {
    if (!this.containerRef.contains(target)) {
      this.props.onClickOut();
    }
  };

  containerRef: HTMLElement;

  render() {
    const { children, ...rest } = this.props;
    const filteredProps = _.omit(rest, 'onClickOut');

    return (
      <div
        {...filteredProps}
        ref={container => {
          this.containerRef = container;
        }}
      >
        {children}
      </div>
    );
  }
}

export default IxClickOut;

package.json

{
  "name": "verinmueblesmeteor",
  "private": true,
  "scripts": {
    "start": "meteor run",
    "ios": "NODE_ENV=developement meteor run ios"
  },
  "dependencies": {
    "fine-uploader": "^5.10.1",
    "foundation-sites": "^6.2.3",
    "install": "^0.8.1",
    "ix-gm-polygon": "^1.0.11",
    "ix-type-building": "^1.4.4",
    "ix-type-offer": "^1.0.10",
    "ix-utils": "^1.3.7",
    "keymirror": "^0.1.1",
    "meteor-node-stubs": "^0.2.3",
    "moment": "^2.13.0",
    "npm": "^3.10.3",
    "rc-slider": "^3.7.3",
    "react": "^15.1.0",
    "react-addons-pure-render-mixin": "^15.1.0",
    "react-dom": "^15.1.0",
    "react-fileupload": "^2.2.0",
    "react-list": "^0.7.18",
    "react-modal": "^1.4.0",
    "react-redux": "^4.4.5",
    "react-router": "^2.6.0",
    "react-styleable": "^2.2.4",
    "react-textarea-autosize": "^4.0.4",
    "redux": "^3.5.2",
    "redux-form": "^5.3.1",
    "redux-thunk": "^2.1.0",
    "rxjs": "^5.0.0-beta.9",
    "rxjs-es": "^5.0.0-beta.9",
    "socket.io": "^1.4.8"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.6",
    "babel-eslint": "^6.0.4",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0",
    "core-js": "^2.0.0",
    "cssnano": "^3.7.1",
    "eslint": "^2.12.0",
    "eslint-config-airbnb": "^9.0.1",
    "eslint-import-resolver-meteor": "^0.2.3",
    "eslint-plugin-import": "^1.8.1",
    "eslint-plugin-jsx-a11y": "^1.2.2",
    "eslint-plugin-react": "^5.1.1",
    "node-sass": "^3.8.0",
    "postcss-cssnext": "^2.6.0",
    "sasslets-animate": "0.0.4"
  },
  "cssModules": {
    "ignorePaths": [
      "node_modules"
    ],
    "jsClassNamingConvention": {
      "camelCase": true
    },
    "extensions": [
      "scss",
      "sass"
    ],
    "postcssPlugins": {
      "postcss-modules-values": {},
      "postcss-modules-local-by-default": {},
      "postcss-modules-extract-imports": {},
      "postcss-modules-scope": {},
      "autoprefixer": {}
    }
  }
}

.babelrc

{
  "presets": [
    "es2015",
    "react",
    "stage-0"
  ],
  "whitelist": [
      "es7.decorators",
      "es7.classProperties",
      "es7.exportExtensions",
      "es7.comprehensions",
      "es6.modules"
  ],
  "plugins": ["transform-decorators-legacy"]
}

.eslintrc

{
  "parser": "babel-eslint",
  "extends": "airbnb",
  "rules": {
    "no-underscore-dangle": ["error", { "allow": [_id, b_codes_id] }],
  },
  "settings": {
    "import/resolver": "meteor"
  },
  "globals": {
    "_": true,
    "CSSModule": true,
    "Streamy": true,
    "ReactClass": true,
    "SyntheticKeyboardEvent": true,
  }
}

Perhaps best to write: `const { children, onClickOut, ...filteredProps } = this.props;` — horyd, Jul 31 '16 at 14:23
@horyd not, if i do it eslint throw no-unused-vars onClickOut is defined but never used — cristian camilo cedeño gallego, Jul 31 '16 at 14:25
try to define it as: `static get propTypes() { return { children: PropTypes.any, onClickOut: PropTypes.func }; }` — Omri Aharon, Jul 31 '16 at 14:26
I came here looking for a way to reduce this eslint rule to a warning, not an error. In case you're like me, you can add this entry to your `rules` object in your eslint config: `"react/prop-types": 1` — Brady Dowling, Mar 02 '20 at 18:39

Omri Aharon · Answer 1 · 2017-10-29T15:32:34.773

93

You need to define propTypes as a static getter if you want it inside the class declaration:

static get propTypes() { 
    return { 
        children: PropTypes.any, 
        onClickOut: PropTypes.func 
    }; 
}

If you want to define it as an object, you need to define it outside the class, like this:

IxClickOut.propTypes = {
    children: PropTypes.any,
    onClickOut: PropTypes.func,
};

Also it's better if you import prop types from prop-types, not react, otherwise you'll see warnings in console (as preparation for React 16):

import PropTypes from 'prop-types';

edited Oct 29 '17 at 15:32

answered Jul 31 '16 at 14:31

Omri Aharon

16,299
3
36
54

1

Depends on the Babel config, it doesn't need to be a better if you're using the static properties plugin. – Dave Newton Jul 31 '16 at 14:42
Thanks. The first option throw the same error, the second option solve the problem but i dont understend why defining as class attribute throws an error in this case. Note: I have another components that work fine defining as class attribute – cristian camilo cedeño gallego Jul 31 '16 at 14:46
1

Not sure why one fails and the other one works. I thought it needed to be defined statically on a class either way, perhaps I was wrong. – Omri Aharon Jul 31 '16 at 14:47

Devin Rhode · Answer 2 · 2021-02-11T18:27:54.227

24

I know this answer is ridiculous, but consider just disabling this rule until the bugs are worked out or you've upgraded your tooling:

/* eslint-disable react/prop-types */ // TODO: upgrade to latest eslint tooling

Or disable project-wide in your eslintrc:

"rules": {
  "react/prop-types": "off"
}

edited Feb 11 '21 at 18:27

answered Nov 06 '20 at 00:46

Devin Rhode

18,644
6
42
55

1

The actual syntax for disabling this rule is: "react/prop-types": "off" – Ken A Collins Dec 21 '20 at 15:37
Thanks this is also what I used in eslintrc under the rules section – iBobb Dec 22 '20 at 16:18
IMO, this is a bad practice and shouldn't be recommended to developers. Disabling rules can lead you down rabbit holes of writing poor code. (i.e. disabling rules whenever it seems more convenient.) – airvine Jan 28 '21 at 20:54

Alik · Answer 3 · 2016-07-31T15:43:34.103

16

It seems that the problem is in eslint-plugin-react.

It can not correctly detect what props were mentioned in propTypes if you have annotated named objects via destructuring anywhere in the class.

There was similar problem in the past

edited Jul 31 '16 at 15:43

answered Jul 31 '16 at 14:47

Alik

19,655
4
44
62

I am using babel-eslint and enable all stages Note: I have another components that work fine defining as class attribute – cristian camilo cedeño gallego Jul 31 '16 at 14:49
@cristiancamilocedeñogallego post relevant configs: `package.json`, `.eslintrc` It is hard to tell why it doesn't pick up propTypes – Alik Jul 31 '16 at 14:53
1

so the problem is in flow annotation in `handleClick` – Alik Jul 31 '16 at 15:13
yes @alik was remove the flow annotation and works fine – cristian camilo cedeño gallego Jul 31 '16 at 15:40

airvine · Answer 4 · 2020-08-04T14:08:15.660

I ran into this issue over the past couple days. Like Omri Aharon said in their answer above, it is important to add definitions for your prop types similar to:

SomeClass.propTypes = {
    someProp: PropTypes.number,
    onTap: PropTypes.func,
};

Don't forget to add the prop definitions outside of your class. I would place it right below/above my class. If you are not sure what your variable type or suffix is for your PropType (ex: PropTypes.number), refer to this npm reference. To Use PropTypes, you must import the package:

import PropTypes from 'prop-types';

If you get the linting error:someProp is not required, but has no corresponding defaultProps declaration all you have to do is either add .isRequired to the end of your prop definition like so:

SomeClass.propTypes = {
    someProp: PropTypes.number.isRequired,
    onTap: PropTypes.func.isRequired,
};

OR add default prop values like so:

SomeClass.defaultProps = {
    someProp: 1
};

If you are anything like me, unexperienced or unfamiliar with reactjs, you may also get this error: Must use destructuring props assignment. To fix this error, define your props before they are used. For example:

const { someProp } = this.props;

score 3 · Accepted Answer · answered Jul 31 '16 at 15:44

3

the problem is in flow annotation in handleClick, i removed this and works fine thanks @alik

answered Jul 31 '16 at 15:44

cristian camilo cedeño gallego

2,236
3
16
28

score 3 · Answer 6 · answered Apr 30 '20 at 09:20

3

Issue: 'id1' is missing in props validation, eslintreact/prop-types

<div id={props.id1} >
    ...
</div>

Below solution worked, in a function component:

let { id1 } = props;

<div id={id1} >
    ...
</div>

Hope that helps.

answered Apr 30 '20 at 09:20

Manohar Reddy Poreddy

16,412
7
111
98

score 3 · Answer 7 · answered Dec 14 '20 at 13:48

3

For me, upgrading eslint-plugin-react to the latest version 7.21.5 fixed this

answered Dec 14 '20 at 13:48

Siphenathi

121
1
5

score 1 · Answer 8 · answered May 23 '21 at 03:48

PropTypes checking is a good thing, not recommend to ignore by settings

You can auto generate the propTypes by using vscode React PropTypes Generate extension:

Select your Component's name
Press command + . (Windows is Ctrl + .) show Code Actions and select PropTypesGenerate, or press shift + command + alt + P (Windows is shift + ctrl + alt + P) in the macOS
Input propType to replace default type

score 0 · Answer 9 · answered May 18 '21 at 06:12

Functional React component. Defined as object. I got this error because I copied and pasted the object from a different with a slightly different name and forgot to change the name of the proptypes object.

FooterIcons.propTypes = {} -> FooterIcon.propTypes

React eslint error missing in props validation

9 Answers9

Linked