ESLint React PropTypes, 'prop' is missing in prop validation

kevin janada

I have a stateless react component

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

export default props => <StyledButton>{props.children}</StyledButton>

StyledButton.propTypes = {
    children: PropTypes.node,
}
StyledButton.defaultProps = {
    children: null,
}

And a class component

class Thumbnail extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
           color: 'red',
        }
    }
    render() {
        return (
           <button>{this.props.children}</button>
       )
    }
}

Thumbnail.propTypes = {
    children: PropTypes.node,
}
Thumbnail.defaultProps = {
    children: null,
}

My eslintrc file

module.exports = {
"extends": "airbnb",
"plugins": [
    "react",
    "jsx-a11y",
    "import"
],
"rules": {
    "react/jsx-filename-extension": 0,
    "semi": 0,
    "indent": ["error", 4],
    "react/jsx-indent": 0,
    "jsx-a11y/img-redundant-alt": 0
}
};

Eslint complains that 'children is missing in prop validation' in the stateless component. But it's fine in the class component.

Spent 2 hours trying to fix this, Any help would be greatly appreciated

Adarsh

It's because you are exporting the stateless component directly without any variable holding it meanwhile you are creating propTypes and defaultProps for StyledButton which doesn't exist. Try this.

const StyledButton = props => <button>{props.children}</button>;

StyledButton.propTypes = {
  children: PropTypes.node,
};

StyledButton.defaultProps = {
  children: null,
};

export default StyledButton;

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Eslint - 'match' is missing in props validation (react/prop-types)

ESLint `prop is missing in props validation` but it's there

ESLint: '.map is missing in props validation' (eslint react/prop-types) in Typescript React

missing in props validation react/prop-types

ESlint complains about this.props.handleSubmit missing in prop validation

eslint: Missing "key" prop for element in iterator (react/jsx-key)

What is the problem with the propTypes object, string and array which makes eslint to have this rule: react/forbid-prop-types?

Dispatch action is missing in props validation [react/prop-types]

Line 5: 'tags' is missing in props validation react/prop-types

'children' is missing in props validation react/prop-types

PropTypes isRequired on React Router 4 params prop

You are manually calling a React.PropTypes validation function for the `path` prop on `Route`

React PropTypes : Allow different types of PropTypes for one prop

React Prop Validation for Date Strings

React prop validation for date objects

ESLint error: "Missing props in validation" in React ( Replacing it by PropTypes.checkPropTypes does not fix it )?

Is there a prop that can be used to ignore missing mandatory proptypes warnings?

Failed prop type while doing prop validation in React.js

What should be react default prop type for PropTypes.shape?

RN - ProgressBarAndroid: manually calling React.PropTypes for the `indeterminate` prop

React PropTypes import class. Prop type is invalid

Line 4:27: 'component' is missing in props validation react/prop-types

Failed prop type: Chat: prop type `room` is invalid; it must be a function, usually from React.PropTypes

Warning: Failed prop type: Game: prop type `game` is invalid; it must be a function, usually from React.PropTypes

React TypeScript accepts missing props on ComponentType prop

Missing Something Sending Prop In Link In React

react/prop-types eslint error in typescript react component

I have changed to PropTypes to "prop-types" but still get Error evaluating React.PropTypes

(ESLint) Definition for rule 'react/jsx-sort-prop-types' was not found