[Fix] Component cannot be used as a JSX component. Its return type ‘Element[]’ is not a valid JSX element

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 element

I 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.