Clever Geek Handbook

Missing in type validation / support props

  • I am new to js.
  • fixed other lint bugs that only lint props bugs can't fix

  • I am getting below lint error, googled for error, unable to figure out what the problem is. 17:20 the error "playerLaughing" is missing in the props confirmation / support settings

  • confirmation code below

  • Can you guys tell me how to fix this?
C:\workspace\sports-dia-dashboard\src\components\sample-player\player-section.jsx
  17:20  error    'playerLaughing' is missing in props validation     react/prop-types
  17:40  error    'id' is missing in props validation           react/prop-types
  23:9   warning  Unexpected var, use let or const instead      no-var
  23:53  error    'jumping' is missing in props validation     react/prop-types
  28:32  warning  There should be no space before '='           react/jsx-equals-spacing
  28:32  warning  There should be no space after '='            react/jsx-equals-spacing
  30:37  error    'flying' is missing in props validation        react/prop-types
  33:21  warning  Empty components are self-closing             react/self-closing-comp
  44:3   error    Expected indentation of 4 spaces but found 2  indent



import React from 'react';


class Swimming extends React.Component {
    constructor(props) {
        super(props);
        this.playerLaughing = this.playerLaughing.bind(this);
    }

    playerLaughing() {
          //console.log("playerLaughing");
         // debugger;
        this.props.playerLaughing(this.props.id);
    }

    render() {
          //console.log("render");
          //console.log("accordion / the ExpandCollapse Section component");
        var className = 'player-section' + (this.props.jumping ? ' jumping' : '');

        return (
            <div className={className} onClick={this.playerLaughing}>

                <div className = "sports-player-question-flying sports-submenu-dropmenuHeader">
                    <h3>
                        {this.props.flying}
                    </h3>

                    <div className="up-arrow"></div>
                </div>

                <div className="body">
                    {this.props.children}
                </div>


            </div>
        );

  }

}


export default Swimming;
+3


source to share


2 answers


You should add propTypes

to your component:
For example:

// this goes outside the class deceleration 
Swimming.propTypes = {
    playerLaughing: PropTypes.func,
    jumping: PropTypes.bool,
    //... other props you will use in this component
};

If you want it to be inside the slowdown class

you can use static getter

like so:



// this goes inside the class deceleration
static get propTypes() {
    return {
        playerLaughing: PropTypes.func,
        jumping: PropTypes.bool,
        //... other props you will use in this component
    };
};

EDIT
You must install and import propTypes

. see docs

npm install --save prop-types
import PropTypes from 'prop-types'; // ES6 
var PropTypes = require('prop-types'); // ES5 with npm
+5


source


You need to set the "propTypes" static property on the component to satisfy this lint error.

Here is information about React PropTypes: React Docs

You would add a section similar to this one:



import React from 'react';
import PropTypes from 'prop-types';

class Swimming extends React.Component {
 static propTypes = {
   jumping: PropTypes.bool,
   playerLaughing: PropTypes.func
 };
 constructor(props) {
 ...
}

You need to install the prop-types npm packages.

+5


source






More articles:


All Articles