close

[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?

  1. How To Solve 'App' cannot be used as a JSX component Error?

    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 You Can Use <>. And 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 <>. Now, Your error must be solved

  2. 'App' cannot be used as a JSX component

    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 You Can Use <>. And 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 <>. Now, Your error must be solved

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

Leave a Comment