I keep getting Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag

Question

here is the code

import React from 'react';

function Home() {
  return (
      <div className="home">
        <h1>This is my home page!</h1>
      </div>
      <h2>Welcome and take a look around</h2>
      </div>
  );
}

export default Home;

Here is the error

./src/components/home.js   Line 9:7:  Parsing error: Adjacent JSX
elements must be wrapped in an enclosing tag. Did you want a JSX
fragment <>...</>?

   7 |       <h1>This is my home page!</h1>    
   8 |       </div>
   9 |       <h2>Welcome and take a look around</h2>
     |       ^   
  10 |       </div>

I fixed the code format in your code, so hopefully, the problem is now more obvious. — Emile Bergeron, May 28 '20 at 01:36
Does this answer your question? [Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag](https://stackoverflow.com/questions/31284169/parse-error-adjacent-jsx-elements-must-be-wrapped-in-an-enclosing-tag) — Emile Bergeron, May 28 '20 at 01:37
You can only have a single root element returned by a React component. This is not HTML, it's not a string, it's JavaScript behind. It's all transformed back into `React.createElement('div', /*etc*/)`. — Emile Bergeron, May 28 '20 at 01:39
In your case, the `.home` div is the root, and anything outside of it is considered invalid syntax. You could add the missing the missing opening `div` at the top, or remove the closing div and wrap it all in a fragement like this: `<> all your JSX here >` — Emile Bergeron, May 28 '20 at 01:41
its probably helpful am just the type of person that you to explain pretty well in order for me to understand. — Ralph9496, May 28 '20 at 01:42

score 0 · Answer 1 · answered May 28 '20 at 02:17

Aside from your html being invalid in the example above due to 2 closing div tags, the easiest way to wrap a block of React code without having to add unnecessary divs is to use a React.Fragment:

import React, { Fragment } from 'react

...
return (
  <Fragment>
    <h1>A heading</h1>
    <p>A paragraph</p>
  </Fragment>
)

However there is a more simple method which you will either love or hate which is to use the shorthand for a Fragment and that doesn't require a special import:

<>
  <h1>A heading</h1>
  <p>A paragraph</p>
</>

Personally this is my preferred method but I can understand it may be harder to read if you have multiple maintainers to your application who aren't used to this syntax.

score 0 · Answer 2 · answered Jun 01 '20 at 21:27

At first, you didn't use for the second div section(line9). Also, you should put all of your elements in a section such as ,,,etc.

import React from 'react';

function Home() {
  return (
      <React.fragment className="home">
        <h1>This is my home page!</h1>
        <h2>Welcome and take a look around</h2>
      </React.fragment>
  );
}

export default Home;

I keep getting Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag

2 Answers2