PropTypes of wrapped component leak through

[choffmeister]

Suppose the following simple and common example:

import {connect} from 'react-redux'
import React, {Component, PropTypes} from 'react'

@connect((state) => ({
  age: state.age
}))
class Foobar extends Component {
  static propTypes = {
    name: PropTypes.string.isRequired,
    age: PropTypes.number.isRequired,
    dispatch: PropTypes.func.isRequired
  }

  render () {
    // ...
  }
}

So <Foobar/> needs name, age and dispatch whereas age and dispatch are provided via the @connect HOC. But when I render the component as one would exepect with

<Foobar name='My Name'/>

I get warnings from React, saying that Connect(Foobar) is missing the required props age and dispatch, even though <Foobar/> itself never get rendered without these props (so from <Foobar/>'s point of view everything is fine). To work around this I have two bad options:

1. Make age and dispatch non required or
2. Render <Foobar/> resp. <Connect(Foobar)/> with dummy values for age and dispatch.

The warning is strange by itself anyway, because looking at the code I see

Connect.propTypes = {
  store: storeShape
}

// ...

return hoistStatics(Connect, WrappedComponent)

And I also checked that the .propTypes of the returned HOC only contain the store props. Still I keep getting this warnings.

Btw, I am using the following versions:

• react 15.2.1
• react-redux 4.4.5

Thanks for your help.

[markerikson]

At a first glance, isn't this just a result of using connect as a decorator in combination with a static class field? It's almost like there is no "plain" version of the component, effectively, because it gets immediately run through connect.

[choffmeister]

Yeah, as soon as I finished writing this issue, I noticed the root of the issue. The ES7 class properties are not applied to <Foobar/> and then @connect gets applied to that, but the other way around, again overriding the propTypes of the HOC...

[choffmeister]

So I just have to apply @connect afterwards. This might get better, when there is a non-legacy version of decorators for babel... 😢

Will close this issue since it is not related to this project in any way.

[jimbolla]

It might be worth documenting this in the react-redux docs though.

[choffmeister]

FYI: There seems to be an ticket for the issue regarding these two babel plugins.

loganfsmyth/babel-plugin-transform-decorators-legacy#17