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]}> </li>
)
}
}
}
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