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.