[Solved] ‘App’ cannot be used as a JSX component

I am facing the following error: ‘App’ cannot be used as a JSX component in ReactJS. In this Exerror article, We are going to learn about How to reproduce this error and we will discuss All Possible Solutions Lets Get Start with This Article.

How ‘App’ cannot be used as a JSX component Error Occurs?

I am facing the following error:

'App' cannot be used as a JSX component

So here I am writing all the possible solutions that I have tried to resolve this error.

How To Solve ‘App’ cannot be used as a JSX component Error?

Solution 1: Wrap div from a single JSX

To Solve ‘App’ cannot be used as a JSX component Error Just wrap your return with div or <>. If You are trying to return a single JSX Then you should wrap it with div or <> Just like this.

const App = () => {
  return (
    <div>
      <h1>My First React App</h1>
    </div>
  );
};

export default App;

Or You Can Use <> Just Like this.

const App = () => {
  return (
    <>
      <h1>My First React App</h1>
    </>
  );
};

export default App;

Now, Your error must be solved.

Solution 2:

If You are trying to Return the array as JSX then you will face this error You Can return direct JSX element You can Use Div Or <> just like below.

const App = () => {
  return (
    <>
      {['One', 'Two', 'Three'].map(element => {
        return <h1 key={element}>This is {element}</h1>;
      })}
    </>
  );
};

export default App;

And now Your error will be solved. Thank You.

Conclusion

It’s all About this error. I hope We Have solved Your error. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you?

Also, Read

• react/prop-types X; is missing in props validation
• Error 1273 (HY000) at line 25 Unknown collation: ‘utf8mb4_0900_ai_ci’
• SyntaxError: Unexpected token < in JSON at position 0
• Warning: Use the ‘defaultValue’ or ‘value’ props on select instead of setting ‘selected’ on option
• ‘X’ is not defined react/jsx-no-undef