component definition is missing display name on HOC

Question

I'm trying to create a higher order component but keep getting this eslint waring.

component definition is missing display name

I tried adding a display name like below but it still complains.

import React from 'react';

const HOC = props => (WC) => {
  WC.displayName = 'test'
  return (
    <WC />
  );
}

export default HOC;

Answer 1

Two things you need to correct.

First: Fix order of your functional component declaration.

Second: setting displayName to the component returned from HOC

const HOC = WC => {
  const MyComp = (props) => {
    return (
        <WC {...props} />
      );
  }
  MyComp.displayName = 'test'
  return MyComp;
}

Once you make the above change. You just need to use the HOC like

const MyCompWithHoc = HOC(CompA);

and render it like

<MyCompWithHoc propsA={'A'} {...otherPropsYouWantToPass} />