texi rv texi rv - 11 days ago 5
React JSX Question

npm install classnames not working in my li tag




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

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