Eslint: component definition is missing display name for Combined Context

Question

I have a function that combines multiple context provider components and returns one combined Context Provider. I am getting an eslint error: Component definition is missing display name (eslintreact/display-name). How can I resolve the error?

const providers = [AuthProvider, CartProvider, LocationProvider];

const combineComponents = (...components: FC[]): FC => {
  return components.reduce(
    (AccumulatedComponents, CurrentComponent) => {
      return ({ children }: ComponentProps<FC>): JSX.Element => {
        return (
          <AccumulatedComponents>
            <CurrentComponent>{children}</CurrentComponent>
          </AccumulatedComponents>
        );
      };
    },
    ({ children }) => <>{children}</>
  );
};

export const CombinedContextProvider = combineComponents(...providers);

The CombinedContextProvider component can then be used in App.tsx in the following way:

import React from 'react';

const App: React.FC = ({ Component, pageProps }) => {
  <CombinedContextProvider>
    <Component {...pageProps} />
  </CombinedContextProvider>
)};

export default App;

Does this help? -> https://stackoverflow.com/questions/55620562/eslint-component-definition-is-missing-displayname-react-display-name — Krisztián Balla, May 28 '21 at 20:14
Thanks for the link, the code is very different in that question. It's difficult to draw a correlation. — Joel Hoelting, May 28 '21 at 21:36
The issue is the same which is that your component is an anonymous function. — Linda Paiste, May 29 '21 at 02:17

score 0 · Accepted Answer · answered May 30 '21 at 21:21

Based on a comment that mentioned the issue was an anonymous function, I was able to resolve the error with the following code:

import React, { ComponentProps, FC } from 'react';

import { AuthProvider } from './auth_context';
import { CartProvider } from './cart_context';
import { LocationProvider } from './location_context';

const providers = [AuthProvider, CartProvider, LocationProvider];

const combineComponents = (...components: FC[]): FC => {
  return components.reduce(
    (AccumulatedComponents, CurrentComponent) => {
      return function AccumulateComponents({ children }: ComponentProps<FC>): JSX.Element {
        return (
          <AccumulatedComponents>
            <CurrentComponent>{children}</CurrentComponent>
          </AccumulatedComponents>
        );
      };
    },
    ({ children }) => <>{children}</>,
  );
};

export const CombinedContextProvider = combineComponents(...providers);

Eslint: component definition is missing display name for Combined Context

1 Answers1