React error components cannot be used as JSX components

Overview

The component cannot be used as a JSX component, there are several reasons for this error:

1. Returns an array of JSX elements, not a single element.
2. Returns a JSX element or any value other than null from the component.
3. Use obsolete React type declarations.

Returns a single JSX element

Below is an example of how an error can occur.

 // 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 problem in the code sample is that we are returning an array of JSX elements, not a single JSX element.

To fix the error in this case, we have to wrap the array with React fragment or div elements.

 // App.tsx

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

export default App;

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

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

You may also see the more verbose fragments syntax 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 can also use a div element as a wrapper to return a single JSX element from a component.

don't forget the return value

Another common reason is that we return a JSX element or any value other than null from the component, or forget to return the value.

 // ⛔️ '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 above code example returns undefined because we put the return statement on one line and the JSX code on the next line, and did not use parentheses.

We are not allowed to return undefined from the component, hence this error.

To resolve this error, we must ensure that the returned code is reachable.

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

export default App;

If you are sure that from a React component, a single JSX element is returned or null . But the error persists, try updating the React type declaration.

Update React type declarations

Open a terminal in the root directory of the project and run the following command:

 # 👇️ 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

This command will update your react type declaration version.

Make sure to restart the development server and, if necessary, the IDE. The development server will not pick up these changes until you stop it and rerun the npm start command.

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

 # 👇️ 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

If the error persists, make sure to restart the IDE and development server. VSCode crashes frequently, and sometimes a restart fixes the problem.