Assignment of props to a variable allows bypass of prop-types rule #442
Description
This case will not be detected by prop-types rule:
var props = this.props console.log(props.something)Nor this:
var {props} = this console.log(props.something)I can understand why this may be difficult/impossible if props is being assigned multiple times or within a something dynamic like a conditional but perhaps it's possible to detect these two simple cases.
According to #298, it appears that there might (?) be some support for var props = this.props but I couldn't get this working in my code.
edit: According to the prop-types tests, it appears this is known to not work 😞:
}, { // Reassigned props are ignored code: [ 'export class Hello extends Component {', ' render() {', ' const props = this.props;', ' return <div>Hello {props.name.firstname} {props[\'name\'].lastname}</div>', ' }', '}' ].join('\n'), parser: 'babel-eslint' }, {Semi-Related Issues for reference:
#27
#36
#104
#112
#124
#136
#298
Aside: Benefit of this pattern is that it removes risk of unexpected this, is more terse than this.props.something and keeps props nested under a 'props' namespace thus prop values cannot be confused/shadowed by other vars.
Repro case:
index.js
import React from 'react' class ShouldFail extends React.Component { render () { const props = this.props console.log(props.something) } }package.json
{ "name": "eslint-react-prop-types-test", "version": "1.0.0", "main": "index.js", "scripts": { "test": "eslint index.js" }, "dependencies": { "babel-eslint": "^4.1.8", "eslint": "^2.0.0", "eslint-plugin-react": "^3.16.1" } }.eslintrc
{ "parser": "babel-eslint", "plugins": [ "react" ], "rules": { "react/prop-types": 2 } }