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

kevin janada picture kevin janada · Feb 21, 2018 · Viewed 13.4k times · Source

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

Answer

Adarsh picture Adarsh · Feb 21, 2018

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;