CODEWITHSUNDEEP
reactjseslintreact-proptypeseslint-config-airbnb
kevin janada
kevin janada

Reputation: 41

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

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

Upvotes: 3

Views: 16731

Answers (1)

Adarsh
Adarsh

Reputation: 827

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;

Upvotes: 6

Related Questions