The error “Component cannot be used as a JSX component. Its return type ‘Element[]’ is not a valid JSX element” is an error that is invoked whenever you are coding in react.js and trying to add a component. Given below is the snippet of the error:
Component cannot be used as a JSX component. Its return type 'Element[]' is not a valid JSX elementI would like to share with you the steps I took to fix the “Component cannot be used as a JSX component. Its return type ‘Element[]’ is not a valid JSX element” in your project file.
Why “Component cannot be used as a JSX component. Its return type ‘Element[]’ is not a valid JSX element” error is seen?
This error is seen because you have to return a JSX Element, not an array. The error is seen because you passed an array. In react the components have to return a single root element. React treats components differently.
The detailed solution to fix the error “Component cannot be used as a JSX component. Its return type ‘Element[]’ is not a valid JSX element”, is given below:
How to fix the error, “Component cannot be used as a JSX component. Its return type ‘Element[]’ is not a valid JSX element”?
To fix the error, you will have to return a JSX Element and not an array. Wrapping the complete component is a solution, but you will have to make sure to do it outside of the map/filter function.
To fix the error, “Component cannot be used as a JSX component. Its return type ‘Element[]’ is not a valid JSX element”, follow the steps given below:
First, you will have to start by wrapping the complete component, but you will have to make sure to do it outside of the map/filter function.
To wrap the complete component, you will have to follow the below-mentioned code:
function Todos(): JSX.Element {
return <>{
todos.map(todo => <li>{todo.task}</li>)
}</>
}
Now you will have returned just in one single fragment.
This should fix the error, “Component cannot be used as a JSX component. Its return type ‘Element[]’ is not a valid JSX element”.
Conclusion
To fix the error “Component cannot be used as a JSX component. Its return type ‘Element[]’ is not a valid JSX element”, you will have to return a JSX Element and not an array. Wrapping the complete component is a solution, but you will have to make sure to do it outside of the map/filter function.