Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Create component through props in React

I have a component SomeComponent which takes a Component or IntrinsicElement through the component property and should construct that component. But this is giving type errors.

Parsing error: ‘>’ expected.eslint

‘Component’ refers to a value, but is being used as a type here. Did you mean ‘typeof Component’?ts(2749)

type Component = /unresolved/ any

Here is my source code and how I want it to be used:

import type { ElementType } from 'react';

function SomeComponent({ component: Component }: { component: ElementType }) {
  return (<Component />);
}

//
// This is how I want SomeComponent to be used:
//

const usage1 = <SomeComponent component="div" />;

function MyComponent() {
  return 123;
}

const usage2 = <SomeComponent component={MyComponent} />;

What am I doing wrong and how can this fixed?

Tags:

2

Answers


  1. 0

    You’re confusing the compiler with the "component: Component" bit; it should just be someComponent({component} : {component: ElementType}). You would want to render it via the variable like

    <div>{component}</div>

    Since you do not know the "proper name" of the component here it cannot be rendered using the syntax you describe.

    Login or Signup to reply.
  2. 0

    It seems that tsc and/or ESLint treats <Component /> as a TypeScript type assertion (hence it expects > closing angle bracket, instead of the /> self closing tag end), instead of JSX syntax.

    Make sure that these tools treat your code as JSX-enabled, usually with .tsx file extension.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search