# Fix Component Cannot Be Used as a JSX Component Error

> Fix the TypeScript JSX component error by wrapping returned arrays in a React fragment or upgrading to TypeScript 5.1+ for proper ReactNode support

**URL:** https://sentry.io/answers/component-cannot-be-used-as-a-jsx-component-its-return-type-element-is-not-a-valid-jsx-element/

---

## The Problem

When using a React node, or a React framework such as Next.js, with TypeScript you may get the following TypeScript error:

```
error TS2786: 'ListItems' cannot be used as a JSX component.
  Its return type 'Element[]' is not a valid JSX element.
    Type 'Element[]' is missing the following properties from type 'ReactElement<any, any>': type, props, key
```

For example, the following component may cause this error if you are using a version of TypeScript before version 5.1:

```tsx
const todos = [
  { id: 1, text: "clean the house" },
  { id: 2, text: "buy milk" }
];

function ListItems(): JSX.Element[] {
  return todos.map((todo) => <li key={todo.id}>{todo.text}</li>);
}

export default ListItems;
```

The error occurs when the component is rendered:

```html
<ul>
  <ListItems />
</ul>
```

A React component must return a React node. A React node can be one of the following:

- A React element created using [JSX](https://react.dev/learn/writing-markup-with-jsx), like a `<div />` JSX element
- A string
- A number
- A boolean, `null`, or `undefined` value that's not displayed
- A [portal](https://react.dev/reference/react-dom/createPortal)
- An array of React nodes

Note that you can return an array of elements from a component's `render` method since [React version 16](https://legacy.reactjs.org/blog/2017/09/26/react-v16.0.html).

The error occurs in TypeScript versions before version 5.1 that checks if React components return JSX elements of type `JSX.Element`, which is only one of the possible types that can be returned from a React function component. Returning an array of JSX Elements will cause the type error.

You'll also get a related error in older TypeScript versions if you change the return type of the `ListItem` component from `JSX.Element[]` to `React.ReactNode`:

```tsx
const todos = [
  { id: 1, text: "clean the house" },
  { id: 2, text: "buy milk" }
];

function ListItems(): React.ReactNode {
  return todos.map((todo) => <li key={todo.id}>{todo.text}</li>);
}

export default ListItems;
```

You'll get the following error:

```
error TS2786: 'ListItems' 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'.
```

This error occurs because `React.ReactNode` includes things that aren't JSX elements as React nodes can be more than JSX elements, as seen in the list above.

## The Solution

Here are two ways to fix the error:

- Make your component return a single element.
- Update TypeScript to version 5.1+.

### Make Your Component Return a Single Element

You can wrap your returned elements in a React [fragment](https://react.dev/reference/react/Fragment) to achieve this without adding extra nodes to the DOM:

```tsx
function ListItems(): JSX.Element {
  return (
    <>
      {todos.map((todo) => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </>
  );
}
```

You also need to change the return type of the function from `JSX.Element[]` to `JSX.Element`.

### Update TypeScript to Version 5.1+

If possible, update TypeScript to version 5.1+ so that TypeScript correctly checks if your component returns a valid React node. The [version 5.1 release of TypeScript](https://devblogs.microsoft.com/typescript/announcing-typescript-5-1-beta/#decoupled-type-checking-between-jsx-elements-and-jsx-tag-types) added a new `JSX.ElementType` to check if a React component returns a valid React node.

---

*Source: [sentry.io/answers/component-cannot-be-used-as-a-jsx-component-its-return-type-element-is-not-a-valid-jsx-element/](https://sentry.io/answers/component-cannot-be-used-as-a-jsx-component-its-return-type-element-is-not-a-valid-jsx-element/)*