Pomax / react-onclickoutside

An onClickOutside wrapper for React components
MIT License
1.83k stars 187 forks source link

Failed prop type: The prop `myOpened` is marked as required in `MyComponent`, but its value is `undefined`. #314

Closed scheung38 closed 5 years ago

scheung38 commented 5 years ago
class MyComponent extends Component {
  static propTypes = {
    toggleSubmenu: PropTypes.func.isRequired,
    myOpened: PropTypes.bool.isRequired,
    children: PropTypes.element.isRequired
  }

  // need for use with react-onclickoutside
  handleClickOutside = e => this.props.myOpened && this.props.toggleSubmenu(e)

  render() {
    return this.props.children
  }
}

const mySubmenu = onClickOutside(MyComponent)
Failed prop type: The prop `myOpened` is marked as required in `MyComponent`, but its value is `undefined`.
    in MyComponent (created by OnClickOutside(MyComponent))
    in OnClickOutside(SubmenuComponent) (at myNav.component.js:178)
    in li (at myNav.component.js:169)
    in ul (at myNav.component.js:168)
    in nav (at myNav.component.js:163)
    in Nav (created by Connect(myNav))
    in Connect(Nav) (created by InjectIntl(Connect(myNav)))
    in InjectIntl(Connect(myNav)) (at myNav.directive.js:19)
    in IntlProvider (at intl-provider.component.js:8)
    in IntlProvider (created by Connect(IntlProvider))
    in Connect(IntlProvider) (at myNav.directive.js:18)
    in Provider (at myNav.directive.js:17)
Pomax commented 5 years ago

The static keyword can only be used with methods, you cannot use it for class properties.

class MyComponent extends Component {
  constructor(props) {
    super(props);
  }

  handleClickOutside(e) {
    if (this.props.myOpened) {
      this.props.toggleSubmenu(e);
    }
  }

  render() {
    return this.props.children
  }
}

MyComponent.propTypes = {
  toggleSubmenu: PropTypes.func.isRequired,
  myOpened: PropTypes.bool.isRequired,
  children: PropTypes.element.isRequired
};

const mySubmenu = onClickOutside(MyComponent)