ES6 Failed propType

Hi, I’m using the connector to a ES6 class. I get my data but a warning on the propType. “Warning: Failed propType: Required prop data was not specified in Home. Check the render method of Router.”

I tried enabling es7.classProperties and move to static propTypes = … That got rid of the warning but I rather stay on ES6 and only the ES7 features that i really want (like es7.decorators). Any ideas?

@connect(state => ({
    data: state.info
}))
export default class Info extends React.Component {
    render() {
        return (
            <InfoComponent data={this.props.data}/>
        );
    }
}

Info.displayName = 'Info';
Info.propTypes = {
    data: React.PropTypes.object.isRequired
};

[joshmanderson]

@blesswinsamuel In regards to your example using static propTypes… Does that work for you? Using static propTypes as you have done there still gives me the same warning messages…

EDIT: I got it to work correctly with no warnings using the connect decorator and static propTypes. My problem was babel related… I had the transform-class-properties plugin listed before the transform-decorators-legacy plugin.

transform-decorators-legacy must come before transform-class-properties to be able to use the connect decorator and static propTypes together (note that there are other issues that occur, entirely unrelated to redux, if you specify the order of the plugins incorrectly).

[gaearon]

Don’t use inheritance please 😃. I have never seen a justifiable case for it in React. I think the easiest way out is just not to use decorators in this case.

class Info extends React.Component {
    render() {
        return (
            <InfoComponent data={this.props.data}/>
        );
    }
}

Info.displayName = 'Info';
Info.propTypes = {
    data: React.PropTypes.object.isRequired
};

export default connect(state => ({
    data: state.info
}))(Info)