Typescript on React HOC

Question

I have a React HOC structured like this:

import React from 'react';
import { CookiesConsumer } from './index';

const withCookies = (WrappedComponent: any) => (props: any) => (
  <CookiesConsumer>
    {cookies => (
      <WrappedComponent
        {...props}
        cookiesContext={cookies}
      />
    )}
  </CookiesConsumer>
);

export default withCookies;

I get 2 Typescript eslint warnings on this that I'd like to fix. Both on the any type declarations:

Unexpected any. Specify a different type.eslint(@typescript-eslint/no-explicit-any)

For the props type, I don't know what properties or value types might be in the props object, so how can I define it better than any?

For the WrappedComponent type I've tried types like ReactNode or ReactElement but that throws a new error on the actual usage of : JSX element type 'WrappedComponent' does not have any construct or call signatures.

Lidor Avitan · Accepted Answer · 2019-06-12 11:55:33Z

7

import React from 'react';
import { CookiesConsumer } from './index';

interface withCookiesProps {
    someProp: boolean;
  }


const withCookies = <P extends object>(WrappedComponent: React.ComponentType<P>) => (props: P & withCookiesProps) => (
  <CookiesConsumer>
    {cookies => (
      <WrappedComponent
        {...props}
        cookiesContext={cookies}
      />
    )}
  </CookiesConsumer>
);

export default withCookies;

Refernence

edited Jun 12, 2019 at 11:55

answered Jun 12, 2019 at 11:29

Lidor Avitan

1,40411 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

CaribouCode Over a year ago

Feel like I'm 95% there with this but struggling a little because the example you give is a bit different. Would you be able to provide an example where the props are unknown like my component?

Lidor Avitan Over a year ago

Let me know if it's ok, if no I will check it out again.

CaribouCode Over a year ago

OK I think we're there! My example doesn't have any props for withCookies so I removed that from your example but the rest seems to get rid of existing errors.

Collectives™ on Stack Overflow

Typescript on React HOC

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related