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