Categories
TypeScript Answers

How to fix the error ‘Component cannot be used as a JSX component. Its return type ‘Element[]’ is not a valid JSX element’ with React TypeScript?

Spread the love

Sometimes, we want to fix the error ‘Component cannot be used as a JSX component. Its return type ‘Element[]’ is not a valid JSX element’ with React TypeScript.

In this article, we’ll look at how to fix the error ‘Component cannot be used as a JSX component. Its return type ‘Element[]’ is not a valid JSX element’ with React TypeScript.

How to fix the error ‘Component cannot be used as a JSX component. Its return type ‘Element[]’ is not a valid JSX element’ with React TypeScript?

To fix the error ‘Component cannot be used as a JSX component. Its return type ‘Element[]’ is not a valid JSX element’ with React TypeScript, we need to make sure our component returns a single root element.

For instance, we write

function Todos(): JSX.Element {
  return (
    <>
      {todos.map((todo) => (
        <li>{todo.task}</li>
      ))}
    </>
  );
}

to put our array of items in a fragment so that the component can be compiled.

We call todos.map to render an array of li elements so we need to wrap them with a fragment.

Conclusion

To fix the error ‘Component cannot be used as a JSX component. Its return type ‘Element[]’ is not a valid JSX element’ with React TypeScript, we need to make sure our component returns a single root element.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.