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
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;