Typescript Type-Error for Component

[digitalkaoz]

I know this question might be asked several times, but all issues i looked at didnt provide a working solution:

const Projects = universal(import("../components/Projects"), {
  loading: Loading,
  error: Failed,
});

const Home = ({ projects = [] }: PageData) => (
    <Projects projects={projects} />
);

when using the Projects Component, Typescript gives me this error:

ERROR in .../index.tsx(32,8):
TS2322: Type '{ projects: any[]; }' is not assignable to type 'IntrinsicAttributes & UniversalContext & Partial<UniversalProps> & { children?: ReactNode; }'.
  Property 'projects' does not exist on type 'IntrinsicAttributes & UniversalContext & Partial<UniversalProps> & { children?: ReactNode; }'.

so how to correctly type the final component?

[digitalkaoz]

i think i figured it out:

const Projects = universal(import("../components/Projects"), {
  loading: Loading,
  error: Failed,
}) as FunctionComponent<ProjectsProps>;

you only have to define the props your component receives elsewhere (not in the same file like the component)

[ScriptedAlchemy]

Yeah you’ve got the function formatted correctly. If you’d like, open a PR with an example of this HOC :)

[digitalkaoz]

Am i reading a little bit of sarcasm? ;) yeah will craft a properly formatted PR for the readme ;)