npm install classnames not working in my li tag

Question

• I am new to React JS.
• I am trying to combine my classes using npm package classnames. https://www.npmjs.com/package/classnames
• but it's not working:

classname 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 1

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(
      child.props.liClass,
      {
        'first-time-active': (managedProductActivationDate === undefined || managedProductActivationDate === ''),
        'ft-prev-day': managedProductActivationDate !== ''
      }
    )

    return (
        <li role='presentation' key={index} className={classes}>
          <a 
            href='#' 
            className={`sports-tab-header`}
            onClick={this.handleClick.bind(this, index)}>
              <h2>{child.props.label}</h2>
              <p className="sports-subtitle">{child.props.subtitle}</p>
          </a>
          {content}
        </li>
    );
}