toggle react component using hide show classname

Question

I'm using this npm https://www.npmjs.com/package/classnames

<ul className={classnames('hide', {'show': props.openFilter, 'hide': !props.openFilter} )}>
</ul>

I do this.setState({openFilter: !this.state.openFilter}) , but the toggle won't work, it show the first time, what's the problem?

Answer 1

您可能正在寻找...

<ul className={ this.state.openFilter ? "show" : "hide" }></ul>

Answer 2

Without seeing the rest of the function I can only presume you intended to do the following instead.

<ul
  className={classnames({
    show: this.state.openFilter,
    hide: !this.state.openFilter
  })}
/>

For clarity, classnames accepts arguments of strings and/or objects. String arguments appear as written is their value is truthy. Whereas object arguments key are transformed into classes where their values are truthy.