CODEWITHSUNDEEP
reactjstypescript
yudhiesh
yudhiesh

Reputation: 6799

What is the type of a component passed in a HOC?

I am converting a protectedRoute HOC with AWS-Amplify from Javascript to TypeScript.

This HOC will be used to protect any routes that require authentication. If the user is not signed in it will redirect them to a specific route.

import React, { useEffect } from "react";
import { Auth } from "aws-amplify";


interface Props {
  history: string[];
}

const protectedRoute = (Comp: React.FunctionComponent, route = "/profile") => (
  props: Props
) => {
  async function checkAuthState() {
    try {
      await Auth.currentAuthenticatedUser();
    } catch (error) {
      props.history.push(route);
    }
  }
  useEffect(() => {
    checkAuthState();
  }, []);
  return <Comp {...props} />;
};

export default protectedRoute;

Example of using the HOC for a protected route

const Protected = () => {
  return <Container>Protected</Container>;
};

export default protectedRoute(Protected);

The error I am getting from <Comp {...props} />:

Type '{ history: string[]; }' has no properties in common with type 'IntrinsicAttributes & { children?: ReactNode; }'

I cannot figure out what type to use for Comp but I am passing in a functional component and const Protected returns a JSX.Element.

I tried setting Comp to be React.ReactNode but get the same result.

I am also aware that the answer from this question mentions that I should just use any but I want to know if there is a proper type to use here.

Upvotes: 1

Views: 59

Answers (1)

LMulvey
LMulvey

Reputation: 1670

Use React.FunctionComponent<Props> to explicitly tell the type to use your Props interface.

Note that the children prop is implicitly included with React.FunctionComponent but that will change in a future version of @types/react. You can read more information here.

Upvotes: 1

Related Questions