eslint-config-standard-react: missing in props validation

I’m using the standard command and the atom linter and for the code below it’s stating 'url' is missing in props validation. Do I have to switch to eslint and config files? I’d really like to be able to use standard and the atom linter.

var Layout = require('./layout.jsx')
var React = require('react')

module.exports = React.createClass({
  render: function render () {
    return (
    <Layout {...this.props}>
      <h3>URL: {this.props.url} - Not Found(404)</h3>
      <h6>I am a Plain vanilla react view</h6>
    </Layout>
    )
  }
})

About this issue

  • Original URL
  • State: closed
  • Created 9 years ago
  • Comments: 20 (8 by maintainers)

Most upvoted comments

https://stackoverflow.com/a/49686927/2101864 provides up-to-date information.

@despairblue static class properties require you use babel with stage 0, I don’t think it’s unreasonable that you’d need to configure babel-eslint as the parser.

If you’re only using ES6 classes the correct way to define propTypes is shown in the react docs:

export class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
  }
  tick() {
    this.setState({count: this.state.count + 1});
  }
  render() {
    return (
      <div onClick={this.tick.bind(this)}>
        Clicks: {this.state.count}
      </div>
    );
  }
}
Counter.propTypes = { initialCount: React.PropTypes.number };
Counter.defaultProps = { initialCount: 0 }

Having the rule enabled is very useful, I’m against disabling it.

Just chiming in one last time: Are you aware that this rule does not work with static class properties?

// does not work because standard cannot parse it
export default class Foo extends Component {
  static propTypes = {
    style: PropTypes.object.isRequired
  }
  render () {
    return <View style={this.props.style}/>
  }

This would only work with babel-eslint as of now, see https://github.com/yannickcr/eslint-plugin-react/issues/43

I agree @dcousens @dlmanning children doesn’t need to be validated, I’ve been including this in all my components, it would be nice if it wasn’t required.

propTypes: {
  children: React.PropTypes.node
}