Fix - Component cannot be used as a JSX component in React

avatar

Borislav Hadzhiev

Mon Apr 18 20223 min read

Fix - Component cannot be used as a JSX component in React #

The error "Component cannot be used as a JSX component" occurs for multiple reasons:

  1. Returning an array of JSX elements instead of a single element.
  2. Returning any value other than a JSX element or null from a component.
  3. Having outdated version of React typings.

cannot be used as jsx component

Here is an example of how the error occurs.

App.tsx
// ⛔️ 'App' cannot be used as a JSX component. // Its return type 'Element[]' is not a valid JSX element. // Type 'Element[]' is missing the following properties from type 'ReactElement<any, any>': type, props, key const App = () => { return ['a', 'b', 'c'].map(element => { return <h2 key={element}>{element}</h2>; }); }; export default App;

The issue in the code sample is that we're returning an array of JSX elements instead of a single JSX element.

To solve the error in this situation, we have to wrap the array using a React fragment or a div element.

App.tsx
const App = () => { return ( <> {['a', 'b', 'c'].map(element => { return <h2 key={element}>{element}</h2>; })} </> ); }; export default App;

Now our component returns a single JSX element, so the error is resolved.

Fragments are used when we need to group a list of children without adding extra nodes to the DOM.

You might also see the more verbose syntax of fragments being used.

App.tsx
import React from 'react'; const App = () => { return ( <React.Fragment> {['a', 'b', 'c'].map(element => { return <h2 key={element}>{element}</h2>; })} </React.Fragment> ); }; export default App;

You could also use a wrapper div element to return a single JSX element from your component.

Another common cause of the "Component cannot be used as a JSX component" error is when we return anything other than a JSX element or null from a component, or forget to return a value.

App.tsx
// ⛔️ 'App' cannot be used as a JSX component. // Its return type 'undefined' is not a valid JSX element. const App = () => { // 👇️ this returns undefined return <h2>hello world</h2> }; export default App;

The code sample above returns undefined, because we have placed our return statement on one line and the JSX code on the next without using parenthesis.

We aren't allowed to return undefined from a component, so the error occurs.

To solve it, we have to make sure the code we are returning is reachable.

App.tsx
const App = () => { return ( <div> <h2>hello world</h2> </div> ); }; export default App;

If you are sure you are returning a single JSX element or null from your React component but the error persists, try updating your React typings.

Open your terminal in your project's root directory (where your package.json file is located) and run the following command:

shell
# 👇️ with NPM npm install --save-dev @types/react@latest @types/react-dom@latest # 👇️ if you also want to update react and react-dom npm install react@latest react-dom@latest # ------------------------------ # 👇️ with YARN yarn add @types/react@latest @types/react-dom@latest --dev # 👇️ if you also want to update react and react-dom yarn add react@latest react-dom@latest

The command will update the versions of your react typings.

Make sure to restart your development server and your IDE if necessary. Your dev server won't pick up the changes until you stop it and re-run the npm start command.

If the error is not resolved, try to delete your node_modules and package-lock.json (not package.json) files, re-run npm install and restart your IDE.

shell
# 👇️ delete node_modules and package-lock.json rm -rf node_modules rm -f package-lock.json rm -f yarn.lock # 👇️ clean npm cache npm cache clean --force npm install

Make sure to restart your IDE and dev server if the error still persists. VSCode often glitches and a reboot solves things sometimes.

Use the search field on my Home Page to filter through my more than 1,000 articles.