How to use the recompose.setDisplayName function in recompose

// Executes bottom to top. Bottom most HOC Will be the inner most Component
  return compose(
    // Instantiates Widgets into DOM with Data API (Must be at the top of compose)
    withDataAPI({name}),
    // Try to inject browser globals into global namespace
    withBrowserGlobals({name}),
    // Initialize state with react-redux Provider
    withInitialState({reducers, enhancers}),
    // Clears store on Remove
    withRemoveWidget,
    // Connects and Auths with Spark API
    withSpark,
    // Retrieves and stores current user
    withCurrentUser,
    // Set distinct display name
    setDisplayName(`SparkWidgetBase(${name})`),
    // Inject version number into component as static prop
    setStatic('version', process.env.REACT_CISCOSPARK_VERSION),
  );
}

getSelectedAccount, isAccountSelectEnabled,
} from 'Selectors/connectHardwareWallet'
import { confirmAccountSelection } from 'Actions/connectHardwareWallet'

import UnitsLoading from 'Components/UnitsLoading'
import AddressLink from 'Components/AddressLink'
import T from 'Components/i18n/T'

import BackButton from './BackButton'
import ConnectionStatus from './ConnectionStatus'
import redirectNotConnected from './redirectNotConnected'
import SwitchPathButton from './SwitchPathButton'
import DerivationPathChanger from './DerivationPathChanger'

export default compose(
  setDisplayName('ConfirmAccountSelection'),
  setPropTypes({
    walletType: PropTypes.string.isRequired,
    assetSymbol: PropTypes.string.isRequired,
  }),
  redirectNotConnected,
  connect(createStructuredSelector({
    account: getSelectedAccount,
    accountSelectEnabled: isAccountSelectEnabled,
  }), {
    handleConfirm: confirmAccountSelection,
  }),
  withProps(({ walletType, assetSymbol, account }) => ({
    disableConfirm: !account.label,
    backPath: routes.connectHwWalletAsset(walletType, assetSymbol),
  }))
)(({

<i></i>
                
              
            
          
        
      
      <div style="{{">
        <img style="{{" src="{TwitterStripes}">
      </div>
    
  )
}

export default compose(
  setDisplayName('Reviews'),
  withState('currentSlide', 'setCurrentSlide', 0),
  withHandlers({
    handleNext: ({ currentSlide, setCurrentSlide }) =&gt; () =&gt; {
      if (currentSlide &gt;= slides.length - 1) {
        setCurrentSlide(0)
      } else {
        setCurrentSlide(currentSlide + 1)
      }
    },
    handlePrevious: ({ currentSlide, setCurrentSlide }) =&gt; () =&gt; {
      if (currentSlide == 0) {
        setCurrentSlide(slides.length - 1)
      } else {
        setCurrentSlide(currentSlide - 1)
      }
    }

import Table, { Tr } from '@ncigdc/uikit/Table';
import {
  AppendExploreCaseSetButton,
  CreateExploreCaseSetButton,
  RemoveFromExploreCaseSetButton,
} from '@ncigdc/modern_components/withSetAction';

import { theme } from '@ncigdc/theme';
import withSelectIds from '@ncigdc/utils/withSelectIds';
import withPropsOnChange from '@ncigdc/utils/withPropsOnChange';
import { withRouter } from 'react-router-dom';
import { isSortedColumn } from '@ncigdc/utils/tables';
import timestamp from '@ncigdc/utils/timestamp';

export default compose(
  setDisplayName('EnhancedExploreCasesTable'),
  withSelectIds,
  withRouter,
  withPropsOnChange(
    ['ssmsAggregationsViewer'],
    ({ ssmsAggregationsViewer: { explore } }) => {
      const { occurrence__case__case_id: { buckets } } = explore.ssms
        .aggregations || {
        occurrence__case__case_id: { buckets: [] },
      };
      const ssmCounts = buckets.reduce(
        (acc, b) => ({
          ...acc,
          [b.key]: b.doc_count,
        }),
        {}
      );

);
};

HomePage.propTypes = {
  curUser: propType(userFragment).isRequired,
};

export default compose(
  injectIntl,
  withFormProps,
  withPWABtnProps,
  withGlobalContextProps,
  withSEO({ title: 'homeHTMLTitle' }),
  setDisplayName('HomePage'),
)(HomePage);

import {createElement} from 'react'
import {setDisplayName} from 'recompose'
import ReactComponent from './ReactComponent'

export const Div = ReactComponent(props => createElement('div', props))
  .map(setDisplayName('Div'))

export const P = ReactComponent(props => createElement('p', props))
  .map(setDisplayName('P'))

export const H1 = ReactComponent(props => createElement('h1', props))
  .map(setDisplayName('H1'))

export const H2 = ReactComponent(props => createElement('h2', props))
  .map(setDisplayName('H2'))

export const Dl = ReactComponent(props => createElement('dl', props))
  .map(setDisplayName('Dl'))

export const Dd = ReactComponent(props => createElement('dd', props))
  .map(setDisplayName('Dd'))

export const Dt = ReactComponent(props => createElement('dt', props))
  .map(setDisplayName('Dt'))

resetOnBlur: false,
  filter: false,
  searchByTap: false,
  hasSearch: false,
  onSearch() {},
  onChange() {},
  onScrollEnd() {},
  onInput() {},
  onOpen() {},
  onClose() {},
  onBlur() {},
};

export { N2OSelect };
export default compose(
  setDisplayName('N2OSelect'),
  onClickOutside
)(N2OSelect);

<small>
          
          Already registered with the Faa.st Affiliate API? Login here.
          
        </small>
      
    
  )
}

export default compose(
  setDisplayName('AffiliateSignup'),
)(AffiliateSignup)

import React from 'react'
import { compose, setDisplayName, } from 'recompose'
import { Card, CardHeader, CardBody, CardFooter } from 'reactstrap'
import Overlay from 'Components/Overlay'
import T from 'Components/i18n/T'

import GrumpyCat from 'Img/grumpy-cat.gif'

export default compose(
  setDisplayName('Blocked'),
)(() => (
  
    
      
        Restricted Area
      
      
        <img src="{GrumpyCat}/" style="{{">
      
      
        Sorry, you are accessing faa.st from a blocked location. 
        If you are getting this message in error, you can learn more <a href="https://medium.com/faast/faast-location-restrictions-9b14e100d828">here.</a>
      
    
  
))