Skip to content

#125 introduce bug with decorators #130

@iam4x

Description

@iam4x
function foobar(DecoratedComponent) {
  return class Parent extends Component {

   state = { isActive: true } 

    render() {
      const { isActive }  = this.state; 
      return <DecoratedComponent isActive={ isActive } />; 
    }

  }
}

@foobar()
class Child {
  props: { isActive: boolean; };

  render() {
    ....
  }
}

In this case, propTypes will be applied to Wrapper instead of Parent it will log in dev-console:

Warning: Failed propType: Invalid prop `isActive` supplied to `Parent`.

Expected:
bool

Got:
void

My .babelrc for help:

{
  "presets": ["save"],
  "plugins": [],
  "env": {
    "browser": {
      "plugins": [
        "typecheck",
        ["react-transform", {
          "transforms": [
            {
              "transform": "react-transform-hmr",
              "imports": [ "react" ],
              "locals": [ "module" ]
            },
            {
              "transform": "react-transform-catch-errors",
              "imports": [ "react", "redbox-react" ]
            }
          ]
        }]
      ]
    },
    "production": {
      "plugins": ["react-remove-prop-types"]
    }
  }
}

My workaround for now, which is painful is to call the decorator as a function in the export.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions