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
in my case adding `import React from "react";` worked (no idea why it wasn't there in the first place). — Hila Grossbard, Sep 25 '22 at 06:33

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

132

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,959
5
40
58

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

130

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

23,026
8
58
72

2

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
3

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

airvine · Answer 3 · 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;

Konstantin · Answer 4 · 2016-07-31T15:43:34.103

21

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

Konstantin

24,271
5
48
65

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 – Konstantin Jul 31 '16 at 14:53
1

so the problem is in flow annotation in `handleClick` – Konstantin 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

score 9 · Answer 5 · edited Oct 20 '22 at 05:44

Install prop-types package with- npm i prop-types --save Import it-

import PropTypes from 'prop-types';

Then specify the props, I implemented this way-

Text.propTypes = {
  children: PropTypes.node.isRequired,
};

export default function Text({ children }) {
  return (
    <VStyle className="para">
      <p>{children}</p>
    </VStyle> 
  );
}

Also add this in your eslintrc.json or .js file

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

score 6 · Answer 6 · answered Feb 02 '22 at 18:43

On the new version of React and also Next.js, you can simply import PropTypes as follows,

import PropTypes from "prop-types";

and at the bottom of your file add defaultProps and propTypes such as,

Post.defaultProps = {
  posts: "",
};

Post.propTypes = {
  posts: PropTypes.string,
};

export default Post;

It should resolve your eslint warnings.

score 4 · Answer 7 · answered Apr 30 '20 at 09:20

4

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

25,399
9
157
140

score 4 · Answer 8 · answered Dec 14 '20 at 13:48

4

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

answered Dec 14 '20 at 13:48

Siphenathi

491
4
7

score 4 · Answer 9 · 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 3 · Answer 10 · answered Sep 13 '22 at 01:00

Another way is:

File: App.js

    ...
        <Component1 key1="abc" />
    ...

File: Component1.js

1 error:

    function Component1 ({ key1 }) {
        console.log('key1', key1);
    }

2 error:

    function Component1 (props) {
        let{ key1 } = props;
        console.log('key1', key1);
    }

3 works:

NOTE: prop instead of props

    function Component1 (prop) {
        let{ key1 } = prop;
        console.log('key1', key1);
    }

Looks like, linter only checks for proper word props, not for prop or like.
It's a solution if you are just getting started or quick prototyping.
For later or large projects, defining proptypes might be better.

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

2

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

3,502
4
20
31

score 2 · Answer 12 · answered Jun 02 '21 at 13:20

I'm finding eslint to be overly strict in the project I'm working on myself but for this error I fixed it by defining my interface and then implementing as such:

interface myInterface: {
  test: string
}

const MyComponent: React.FC<myInterface> = (props: myInterface) => {

score 2 · Answer 13 · answered Sep 15 '21 at 20:20

Duplicating my answer from a similar question: https://stackoverflow.com/a/69199304/4290193

eslint-plugin-react@^7.25.0 appears to have resolved the issue for those using React.FC<IProps> with react/prop-types validation rule.

So instead of

const Example: React.FC<IProps> = (props: IProps) => ...

This now works without warnings after the update

const Example: React.FC<IProps> = (props) => ...

score 0 · Answer 14 · 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

score 0 · Answer 15 · answered Nov 16 '21 at 00:22

Instead of disable prop-types rule, we can introduce children property as part of component props, eg:

import React, { Component } from 'react';

export default class ErrorBoundary extends Component<{ children: React.ReactNode }> {
  constructor(props: { children: React.ReactNode }) {
    super(props);

    this.state = { error: null, errorInfo: null };
  }

  componentDidCatch(error: Readonly<unknown>, errorInfo: Readonly<unknown>): void {
    this.setState({ error, errorInfo });
  }

  render(): React.ReactElement | React.ReactNode {
    const { children } = this.props;
    const { error, errorInfo } = this.state as Readonly<Record<string, { componentStack: string }>>;

    if (errorInfo)
      return (
        <details>
          <h3>Oops, error detected.</h3>
          <p>{error?.toString()}</p>
          <p>{errorInfo?.componentStack}</p>
        </details>
      );
    return children;
  }
}

Above one is typical example of getting eslint error gone ~~

Don't worry be happy ~~

React eslint error missing in props validation

15 Answers15

Linked