Search code examples
javascriptreactjsecmascript-2016

defaultProps overrides delevert props


I have an simple react component that i send a bool prop to like <MenuItem active={notificationMenu.shown} />
but the prop don't get changed inside the component and is always true even if i pass it in on the element

@Radium
export class MenuItem extends Component {
  styles = {
    hidden: {
      listStyleType: "none"
    }
  }
  static propTypes = {
    active: React.PropTypes.bool.isRequired
  }
  static defaultProps = {
    active: true
  }
  render() {
    if(this.props.active) {
      return (
        <li style={this.props.style}>
          {this.props.children}
        </li>
      )
    } else {
      return (
        <li style={[this.styles.hidden, this.props.style]}>&nbsp;</li>
      )
    }
  }
}

Solution

  • The problem where that Menu parent where iterating over this.props.children and did not use the spread operation {...this.props}. so i where overriding the props to undefined and then defaultProps kicked in.

    romseguy's answer made me think about checking all the parent components again