CODEWITHSUNDEEP
javascriptreactjseslintreact-proptypes
user8159753
user8159753

Reputation:

React Prop-Types not detected ESLint

I have this on my react page:

import PropTypes from 'prop-types';

...then

  componentWillMount() {
    this.props.myfunction();
  }

...and finally:

MyComponent.PropTypes = {
  myfunction: PropTypes.func,
};

Why does ESLine still complain with:

"ESLint: 'myfunction' is missing in props validation" ?

Upvotes: 1

Views: 620

Answers (1)

Chris
Chris

Reputation: 59491

Try using lower-case for your propTypes declaration:

MyComponent.propTypes = {
  myfunction: PropTypes.func,
};

The difference here is that PropTypes (captial "P") is your node package, but propTypes (lowercase) is the name of the object inside your component.

Demo

class MyApp extends React.Component {
  componentWillMount() {
    this.props.myFunction();
  }
  render() {
    return (<p>hello</p>);
  }
}

MyApp.propTypes = {
  myfunction: PropTypes.func,
};

ReactDOM.render(<MyApp myFunction={() => {console.log("foo bar")}} />, document.getElementById("myApp"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://unpkg.com/prop-types/prop-types.min.js"></script>
<div id="myApp"></div>

Upvotes: 1

Related Questions