How to use the utility/componentClassNames function in utility

render() {
    const item = this.props.item
    const t = this.props.t

    let view
    if (item) {
      const title = <span>
        {t('account.account')}
        <code>{item.alias ? item.alias : item.id}</code>
      </span>

      view = <div>
        
              {t('account.newAddress')}
            ,
          ]}
        /&gt;

        
          </div>

render() {
    const chevron = require('images/chevron.png')

    return(
      <div>
        <div>
          <div>
            <ul>
              {this.props.breadcrumbs.map(crumb =&gt;
                <li>
                  {!crumb.last &amp;&amp; 
                    {capitalize(crumb.name)}
                    <img src="{chevron}">
                  }

                  {crumb.last &amp;&amp; <span>
                    {this.props.title || crumb.name}
                  </span>}
                </li>
              )}
            </ul></div></div></div>

render() {
    const t = this.props.t
    return(
      <div>
        

        <div>
          <div>
            <form>
              {this.props.children}

              
                {this.props.error &amp;&amp;
                  }

                {this.props.success &amp;&amp;
                  </form></div></div></div>

const newButton = <button>
      + {t('crumbName.new')}
    </button>
    if (!this.props.skipCreate) {
      actions.push(newButton)
    }

    let header =
      


    const rootClassNames = componentClassNames(this, 'flex-container')

    if (this.props.noResults) {
      return(
        <div>
          {header}

          
</div>

render() {
    if (this.props.mnemonic.length === 0) {
      return 
    }
    const t = this.props.t

    return (
      <div>
        

          <div>
            <div>
              
                
                  
                  <button> this.props.succeeded()}
                  &gt;
                    {t('mnemonic.skip')}
                  </button></div></div></div>

render() {
    return (
      <div>
        <img src="{require('images/logo-shadowed.png')}">
        {this.props.children}
      </div>
    )
  }
}

let view
    if (item) {
      const title = <span>
        { t('asset.asset') }
        <code>{item.alias ? item.alias :item.id}</code>
      </span>

      const time = (item.limitHeight-this.props.blockHeight) *2.5
      let assetLabel
      if(this.props.blockHeight{t('asset.issuableLabel',{time:time})}
      }else if(item.limitHeight&gt;0){
        assetLabel = <span>{t('asset.noIssuableLabel')}</span>
      }

      view = <div>
        {t('transaction.issue.issueAsset')},
          ]}
        /&gt;

        
          
            ]}
            items={[</div>

)
    }

    let networkStatusBlock = (
      <div>
        {/*<div>*/}
          {requestStatusBlock}
        {/*</div>*/}
      </div>
    )

    return (
      <div>
        
              <img src="{require('images/console-window.svg')}/">
            
          ]}
        /&gt;

        
          <div>
            {configBlock}
            {networkStatusBlock}
          </div>
        
      </div>

emptyBlock = <span>{t('emptyList.loading')}…</span>
    } else if (this.props.showFirstTimeFlow) {
      emptyBlock = <div>
        <span>
          {t('emptyList.noRecord', {objectName: this.props.objectName})}
        </span>
      </div>
    }

    const classNames = [
      'flex-container',
      styles.empty
    ]

    return (
      <div>
        {emptyImage &amp;&amp; <img src="{emptyImage}">}
        {emptyBlock}
      </div>
    )
  }
}

render() {
    const lang = this.props.core.lang

    return (
      <div>
        
        
          
        
      </div>
    )
  }
}