component definition is missing display name on HOC

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;

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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} />

Method 2

HOC is the component that’s lacking a displayName property. The code you have above is changing the displayName property of WC which you don’t want.

HOC.displayName = 'some higher component'

Method 3

Your HOC should take the component as the first argument instead of props, see the example in the React docs: https://reactjs.org/docs/higher-order-components.html#convention-wrap-the-display-name-for-easy-debugging

EDIT: You can pass it props either by returning a functional component:

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

Or just return the wrapped component after setting the displayName:
const HOC = WC => {
  WC.displayName = 'test';
  return WC;
}


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x