'ReactNode' is not a valid JSX element

Question

I have the following piece of code (codesandbox):

import { ComponentType, ReactNode } from "react";

type DatetimeCell = ({ value }: { value: string }) => ReactNode;

function getDateTimeCell(): DatetimeCell {
  return ({ value }) => value;
}

function buildCell({
  value
}: {
  value: string;
}): ComponentType<{ value: string }> {
  const DateTimeCell = getDateTimeCell();
  return ({ value }) => <DateTimeCell value={value} />;
}

When returning in buildCell I get the error:

'DateTimeCell' cannot be used as a JSX component.
  Its return type 'ReactNode' is not a valid JSX element.

I thought ReactNode would be the most general type for valid JSX, but it seems like that is not the case.
Why is ReactNode not valid JSX and how can I solve this issue?

Edit: I know that wrapping value in React fragments solves the issue. However, in this specific application I need the type DatetimeCell to be able to return any valid JSX. So string should be included.

That indeed solves the type error. However, it creates a new one. Now I cannot return a string in DatetimeCell. — mgottsch
– mgottsch, Commented May 26, 2022 at 13:03

Firoj Siddiki · Accepted Answer · 2022-07-21 19:02:49Z

13

Why is ReactNode not valid JSX ?? => https://stackoverflow.com/a/72353143/10146901

and how can I solve this issue? => Just Return JSX.Element as function return type.

function buildCell({ value }: { value: string }): JSX.Element { // ... my codes }

Solution of your codesandbox

answered Jul 21, 2022 at 19:02

Firoj Siddiki

1,9891 gold badge25 silver badges27 bronze badges

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

5 Comments

mgottsch Over a year ago

I opened your solution and there still is an error in buildCells return.

mgottsch Over a year ago

I think this is what you meant right? codesandbox.io/s/react-typescript-forked-sugr36 However, it still throws an error.

Firoj Siddiki Over a year ago

@mgottsch 'buildCell' is defined but never used . This is just a basic warning not an error. Use the buildCell function somewhere, this warning will be gone

mgottsch Over a year ago

No, this is not what I mean. There is an error in the return function. 'DateTimeCell' cannot be used as a JSX component. Its return type 'ReactNode' is not a valid JSX element. Type 'undefined' is not assignable to type 'Element | null'.ts(2786)

Jake Over a year ago

This just gives a different error,Its type 'Element' is not a valid JSX element type

Sanjeev Chauhan · Accepted Answer · 2024-06-29 14:09:24Z

4

I faced the same issue, and resolved it by updating the TypeScript version to 5.4.2. This resolved the issue.

answered Jun 29, 2024 at 14:09

Sanjeev Chauhan

4,1273 gold badges26 silver badges31 bronze badges

Comments

Nadia Makarevich · Accepted Answer · 2022-05-26 17:37:12Z

1

Part of ReactNode type is undefined, which is not a valid JSX element I think.

The easiest way to solve the problem would be just to type DatetimeCell as Component as well, and always return an element from getDateTimeCell - just wrap the result in a fragment.

import React, { ComponentType } from 'react';

type DatetimeCell = ComponentType<{ value: string }>;

function getDateTimeCell(): DatetimeCell {
  return ({ value }) => <>{value}</>;
}

function buildCell({ value }: { value: string }): ComponentType<{ value: string }> {
  const DateTimeCell = getDateTimeCell();
  return ({ value }) => <DateTimeCell value={value} />;
}

answered May 26, 2022 at 17:37

Nadia Makarevich

1143 bronze badges

3 Comments

mgottsch Over a year ago

I don't understand why undefined is not valid JSX. React does not crash when you use undefined as JSX, so why are the typings like this? (see here for proof: codesandbox.io/s/infallible-payne-yx4xes?file=/src/App.js). In my application, I need DatetimeCell to be able to return string, so I cannot use your solution (See edit).

mpen Over a year ago

I suspect undefined is not allowed just to stop people from forgetting to return something.

riv Over a year ago

This is bad, because it prevents me from returning props.children since it can be undefined...

Noah · Accepted Answer · 2022-05-26 17:46:35Z

-3

When you invoke DateTimeCell it expects a JSX element (ReactNode) to be returned. You are currently returning a string and not a React node in your getTimeCell function. I recommend typing your functional components using the FC type provided by react as below:

import { FC } from "react";

type Props = { value: string };
type DatetimeCell = FC<Props>;

function getDateTimeCell(): DatetimeCell {
  return ({ value }) => <>{value}</>;
}

function buildCell({ value }: Props): DatetimeCell {
  const DateTimeCell = getDateTimeCell();
  return ({ value }) => <DateTimeCell value={value} />;
}

buildCell({ value: "hello" });

answered May 26, 2022 at 17:46

Noah

171 silver badge8 bronze badges

1 Comment

mgottsch Over a year ago

Collectives™ on Stack Overflow

'ReactNode' is not a valid JSX element

4 Answers 4

5 Comments

Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related