texi rv texi rv - 1 year ago 144
React JSX Question

npm install classnames not working in my li tag

is not executing first-time-active ... am I using it correctly? When I use normally the class is working.

  • can you guys tell me what's the problem? It's in this line:

    <li role='presentation' key={index} className={`${liClassName} ${className}`}>

  • providing code below:

    import CombineClassName from 'classnames';

    let managedProductActivationDate = this.props.accountInfo.managedProductActivationDate;

    if(managedProductActivationDate === undefined || managedProductActivationDate === '') {
    className = 'first-time-active';
    } else if (managedProductActivationDate !== '') {
    className = `ft-prev-day`;

Answer Source

For simplicity and legibility - import the classnames modules as classnames. This will make it easier to read everything later, and you won't be second guessing what goes where.

The main issue you have in the code above is this line:

var CombineClassName = `${liClassName} ${className}`

You were

  1. not actually calling the module
  2. overwriting the module with the string literal.

The classnames documentation is really solid, and should help you figure things out as well.

Essentially, you want to pass into the classnames method any thing that will evaluate to true. Anything that evaluates to false will be excluded. With this in mind you can actually include your logic right inside the method, and it will evaluate and return the correct class names for you.

I rewrote the labels method a little to help you out.

function labels(child, index) {
    let isActive = this.state.selected === index;
    let content = isActive ? this.props.children[this.state.selected] : null;    
    let managedProductActivationDate = this.props.accountInfo.managedProductActivationDate;

    const classes = classnames(
        'first-time-active': (managedProductActivationDate === undefined || managedProductActivationDate === ''),
        'ft-prev-day': managedProductActivationDate !== ''

    return (
        <li role='presentation' key={index} className={classes}>
            onClick={this.handleClick.bind(this, index)}>
              <p className="sports-subtitle">{child.props.subtitle}</p>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download