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.
