Assignment of props to a variable allows bypass of prop-types rule

[timoxley]

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'
    }, {

Source

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

[yannickcr]

Yes, tracking variable reassignment can be very difficult so it is ignored for now.

I don't know how popular are these patterns, if it's worth it we could try to add support for them.

Also I really don't know what amount of work would be required for that, it needs investigation.

[sigorilla]

Hi, guys!

I have the same problem as @timoxley. I slightly modified the rule to specify the variables which must also be checked.

I understand that it isn't the best solution. So I didn't make PR. If you have a desire, you can use my changes and finish this rule.

Changes

Diff: sigorilla/eslint-plugin-react@master...sigorilla:sigorilla.props-type

Example

Valid:

/* eslint prop-types: [2, {forbidden: ["props"]}] */
var Hello = React.createClass({
  props: {
    name: React.PropTypes.string,
  },
  render: function () {
    var props = this.props;
    return <div>Hello {props.name}</div>;
  }
});

Invalid:

/* eslint prop-types: [2, {forbidden: ["props"]}] */
var Hello = React.createClass({
  render: function () {
    var props = this.props;
    return <div>Hello {props.name}</div>;
  }
});

[lencioni]

If anyone ends up working on this, it might be worth also checking out #296 while you are in that code, since it is somewhat related.