ESLint：道具验证中缺少“handleVar”（反应/道具类型）

Question

I am working on a project using React and eslint but I got the following error:

ESLint: 'handleVar' is missing in props validation(react/prop-types)

Here is my code:

const Test = (props) => {
 
  return (
        <div className="form-inline row" style={{ marginRight: '10px' }}>
          <Select placeholder="Test" id="6" handleVar={props.handleVar} />
        </div>
  );
};

export default Test;

Do you know how can I solve that?

Thank you very much !

Answer 1

You got that error because you don't use a Type Checking Library like PropTypes, TypeScript or Flow.

More info about the error:

• Prevent missing props validation in a React component definition (react/prop-types)
• Typechecking With PropTypes

React recommend to use TypeScript or Flow instead of PropTypes but here is a working example with PropTypes:

import PropTypes from 'prop-types';

const Test = (props) => {
 
  return (
        <div className="form-inline row" style={{ marginRight: '10px' }}>
          <Select placeholder="Test" id="6" handleVar={props.handleVar} />
        </div>
  );
};

Test.propTypes = {
  handleVar: PropTypes.func
};

export default Test;