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,   } } 

Answer 1

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