Why JSX is not working ?
// @deno-types="@types/react"
import React from "react";
const A = (): React.ReactElement => <div />;
const B = (): React.ReactElement => <A />;
TS2786 [ERROR]: 'A' cannot be used as a JSX component.
Its type '() => React.ReactElement' is not a valid JSX element type.
Type '() => React.ReactElement' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.
const B = (): React.ReactElement => <A />;
^
at file:///Users/elias/code/bureaudouble/bureau/src/routes/Home.tsx:23:38
'children' is declared here.
children: ReactNode;
~~~~
at file:///Users/Library/Caches/deno/npm/registry.npmjs.org/@types/react/18.2.57/index.d.ts:326:9
2 Replies
And this
// @deno-types="@types/react"
import React from "react";
const A: React.FC = () => <div />;
const B: React.FC = () => <A />;
do
TS2786 [ERROR]: 'A' cannot be used as a JSX component.
Its type 'FC<{}>' is not a valid JSX element type.
Type 'FunctionComponent<{}>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
Type 'ReactElement<any, any> | null' is not assignable to type 'ReactNode'.
Type 'ReactElement<any, any>' is not assignable to type 'ReactNode'.
Property 'children' is missing in type 'ReactElement<any, any>' but required in type 'ReactPortal'.
const B: React.FC = () => <A />;
^
at file:///Users/code/bureaudouble/bureau/src/routes/Home.tsx:23:28
'children' is declared here.
children: ReactNode;
~~~~
at file:///Users/Library/Caches/deno/npm/registry.npmjs.org/@types/react/18.2.57/index.d.ts:326:9
I wasn't able to find the answer to your question in the official Deno documentation. However, based on the error message you've provided, it seems that the issue is related to TypeScript's understanding of the JSX component type.
The error message suggests that the function
A is not being recognized as a valid JSX component. In JSX, a component should be defined as a function that returns a ReactElement and optionally takes props and context as arguments.
Here's a suggestion that is not based on the Deno documentation, so please double-check the accuracy of this advice:
Instead of defining your component A as a simple arrow function, you might want to define it as a functional component that explicitly returns a ReactElement. Here's how you could modify your component:
By using React.FC (or React.FunctionComponent), you are explicitly telling TypeScript that A is a functional component, which might resolve the JSX component type error.
Please ensure that you have the correct TypeScript configuration and that your Deno project is set up to handle JSX properly. If the issue persists, you may want to consult the React and TypeScript documentation or seek help from the community for more specific guidance on JSX type errors.