Make prop-types work when renaming this.props

[JelteF]

I think it is handy for non stateless components with lots of properties to do something like this:

class TestComponent extends Component {
    render() {
        let props = this.props;
        return (
            <div>Hello {props.name} </div>
        );
    }
}

This does not trigger the prop-types warning though. Would it be possible to make that work?

[yannickcr]

Since we only use the AST it's very difficult to follow variable reassignments and making it would add a lot of complexity to the rules.

In your case I suggest you to use destructuring instead which is handled by the rule:

class TestComponent extends Component {
    render() {
        let {name} = this.props;
        return (
            <div>Hello {name} </div>
        );
    }
}

[JelteF]

Why would this be difficult? The only thing that is required is that a list of aliases should be kept.

[mydearxym]

@yannickcr this is not work , if the name is a object , will still get warning

[yannickcr]

@mydearxym What warning are you taking about? With destructuring you correctly get the 'name' is missing in props validation warning, which does not trigger with the first pattern.

@JelteF if you have a solution feel free to submit a PR 😃

[mydearxym]

@yannickcr what i mean is if name is an object :

class TestComponent extends Component {
    render() {
        let {name: { firstName }} = this.props;
        return (
            <div>Hello {firstName} </div>
        );
    }
}

TestComponent.propTypes = {
  name: React.PropTypes.shape({
    firstName: React.PropTypes.string   // warning , defined but never used 
  })
};

[yannickcr]

@mydearxym ok, seems you are talking about the no-unused-prop-types rule, this issue is about the prop-types one 😉

(I am aware of the false positives in no-unused-prop-types, I hope to work on it this week)

[mydearxym]

yes is about no-unused-prop-types, my mistake 😉