defaultProps overrides delevert props

Question

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>
      )
    }
  }
}

it's hard to see why without seeing its parent(s), are you sure you pass props.active as `false`, have you logged from the render method? — Eelke, Sep 20 '15 at 19:18
yes i have tried logging in render and it don't change, and im passing in false in some of the cases but it's not reflected in the component — VeXii, Sep 20 '15 at 19:27
okay, to make debugging easier add some text to the `li`, maybe the css change isn't noticeable. — Eelke, Sep 20 '15 at 19:28
the thing is the children gets rendered (so it's easy to distinguish). — VeXii, Sep 20 '15 at 19:38

score 2 · Accepted Answer · answered Sep 21 '15 at 09:10

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

score 1 · Answer 2 · answered Sep 20 '15 at 21:11

1

Probably a problem with Radium as your code is working fine as demonstrated here.

React.render(<MenuItem active={false}>some text</MenuItem>, document.getElementById('app'));

answered Sep 20 '15 at 21:11

romseguy

1,535
13
17

defaultProps overrides delevert props

2 Answers2