How to use classnames

render() {
  const {clickHandler, icon, label, slug} = this.props;
  const classes = classnames('action tooltip__wrapper', {
   [`action--${slug}`]: slug != null,
  });

  return (
   <Tooltip content={label} onClick={clickHandler} position="bottom" wrapperClassName={classes}>
    {icon}
    <span className="action__label">{label}</span>
   </Tooltip>
  );
 }

const EmptyState = ({ children, ...props }) => (
 <div class="col-md-12">
  <div class={cx('text-center', style.emptyStateDivBox)}>
   <MarkupText id="integration.tasmota.discover.noDeviceFound" />
  </div>
 </div>
)

render() {
  const classes = classnames('application__view', {
   [`application__view--${this.props.modifier}`]: this.props.modifier != null,
  });

  return <div className={classes}>{this.props.children}</div>;
 }

getNavigationItems(items) {
  return items.map(item => {
   const classes = classnames(this.props.itemClassName, {
    [this.props.selectedClassName]: item.slug === this.state.selectedItem,
   });

   return (
    <li className={classes} key={item.slug} onClick={this.handleItemClick.bind(this, item)}>
     {item.label}
    </li>
   );
  });
 }

export function torrentStatusClasses(torrent, ...classes) {
 return classnames(classes, {
  'torrent--has-error': torrent.status.includes(torrentStatusMap.error),
  'torrent--is-stopped': torrent.status.includes(torrentStatusMap.stopped),
  'torrent--is-downloading': torrent.status.includes(torrentStatusMap.downloading),
  'torrent--is-downloading--actively': torrent.status.includes(torrentStatusMap.activelyDownloading),
  'torrent--is-uploading--actively': torrent.status.includes(torrentStatusMap.activelyUploading),
  'torrent--is-seeding': torrent.status.includes(torrentStatusMap.seeding),
  'torrent--is-completed': torrent.status.includes(torrentStatusMap.complete),
  'torrent--is-checking': torrent.status.includes(torrentStatusMap.checking),
  'torrent--is-inactive': torrent.status.includes(torrentStatusMap.inactive),
 });
}

const DeviceConfigurationLink = ({ children, documentKey, user, linkClass }) => (
 <a
  target="_blank"
  rel="noopener noreferrer"
  href={`${documentationURL}/${user.language}/docs/integrations/${documentKey}`}
  class={cx({
   [linkClass]: linkClass
  })}
 >
  {children}
 </a>
)

props.systemContainers.map(container => (
          <tr>
           <td>{container.name}</td>
           <td>{container.created_at_formatted}</td>
           <td>
            <span
             class={cx('badge', {
              'badge-success': container.state === 'running',
              'badge-warning': container.state !== 'running'
             })}
            >
             <Text id={`systemSettings.containerState.${container.state}`} />
            </span>
           </td>
          </tr>
         ))

render() {
  const classes = classnames(this.props.baseClassName, {
   [`${this.props.baseClassName}--${this.props.modifier}`]: this.props.baseClassName,
   [this.props.className]: this.props.className,
  });

  return <div className={classes}>{this.props.children}</div>;
 }

function Feature ({ imageUrl, title, description }) {
 const imgUrl = useBaseUrl(imageUrl)
 return (
  <div className={classnames('col col--4', styles.feature)}>
   {imgUrl && (
    <div className='text--center'>
     <div className='feature-image-wrapper'>
      <img className={styles.featureImage} src={imgUrl} alt={title} />
     </div>
    </div>
   )}
   <h3 className='text--center'>{title}</h3>
   <p>{description}</p>
  </div>
 )
}

render() {
  const tabs = Object.keys(this.props.tabs).map(tabId => {
   const currentTab = this.props.tabs[tabId];

   currentTab.id = tabId;

   const classes = classnames('modal__tab', {
    'is-active': tabId === this.props.activeTabId,
   });

   return (
    <li className={classes} key={tabId} onClick={this.handleTabClick.bind(this, currentTab)}>
     {currentTab.label}
    </li>
   );
  });
  return <ul className="modal__tabs">{tabs}</ul>;
 }

render() {
  const classes = classnames(this.props.listClassName, {
   [this.props.uniqueClassName]: this.props.uniqueClassName,
  });

  return <ul className={classes}>{this.getNavigationItems(this.props.items)}</ul>;
 }

render() {
  const classes = classnames('loading-indicator', {
   'is-inverse': this.props.inverse,
  });

  return (
   <div className={classes} key="loading-indicator">
    <div className="loading-indicator__bar loading-indicator__bar--1" />
    <div className="loading-indicator__bar loading-indicator__bar--2" />
    <div className="loading-indicator__bar loading-indicator__bar--3" />
   </div>
  );
 }

const EmptyState = () => (
 <div class="col-md-12">
  <div class={cx('text-center', style.emptyStateDivBox)}>
   <Text id="integration.tasmota.device.noDeviceFound" />

   <div class="mt-5">
    <Text id="integration.tasmota.discoverDeviceDescr" />
    <Link href="/dashboard/integration/device/tasmota/discover">
     <button class="btn btn-outline-primary ml-2">
      <Text id="integration.tasmota.discoverTab" /> <i class="fe fe-radio" />
     </button>
    </Link>
   </div>
  </div>
 </div>
)

render() {
  const classes = classnames(this.props.baseClassName, {
   [`${this.props.baseClassName}--${this.props.modifier}`]: this.props.modifier,
  });

  return <div className={classes}>{this.props.children}</div>;
 }

const EmptyState = ({ children, ...props }) => (
 <div class="col-md-12">
  <div class={cx('text-center', style.emptyStateDivBox)}>
   <Text id="integration.rtspCamera.noCameraFound" />
  </div>
 </div>
)