Adjacent JSX elements must be wrapped in an enclosing tag - gatsby.js

Question

I apologize in advance for the quality of the code. when I try to put my html code into the gatsby.js project into the index.js page, I get this error:

ERROR in ./src/components/section3.js Module build failed (from ./node_modules/gatsby/dist/utils/babel-loader.js): SyntaxError: /path/src/components/section3.js: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...? (26:8)

import React, { Component } from "react"
import "../css/section3.css"
class Section3 extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        return(
            <section>
                <div class="product-banners wt-offset-top-24">
                    <div class="product-banners__item _toolbox">
                        <h3 class="product-banners__title _color-light">Lorem ipsum</h3>
                        <div class="product-banners__btn-wrap wt-offset-top-12">
                            <a class="wt-button wt-button_theme_dark wt-button_size_m wt-button_mode_outline"
                                href="/toolbox/app/">Lorem ipsum
                            </a>
                        </div>
                    </div>
                    <div class="product-banners__item _annual-report">
                        <h3 class="product-banners__title">Lorem ipsum</h3>
                        <div class="product-banners__btn-wrap wt-offset-top-12">
                            <a class="wt-button wt-button_size_m wt-button_mode_outline" href="/annualreport/2018/">Lorem ipsum</a>
                        </div>
                    </div>
                </div>
            </section>
            <div class="section-content _bg-extra-dark home-page__section-content _appreciated">
                <div class="page-segment pad segment-skyblue">
                    <div class="large-image-block">
                        <div class="large-image-block_wrap-img flipped">
                            <div class="large-image-block_img">
                                <img src="image-path" alt=""></img>
                            </div>
                        </div>
                        <div class="large-image-block_wrap">
                            <div class="container">
                                <div class="row">
                                    <div class="large-image-block_col col-md-5 col-lg-4 col-lg-offset-1 col-md-push-6 col-lg-push-5">
                                        <div class="large-image-block_video"></div>
                                    </div>
                                    <div class="large-image-block_col col-md-5 col-lg-4 col-md-offset-2 col-lg-offset-3 col-md-pull-7 col-lg-pull-8">
                                        <div class="red_content centered">
                                            <div class="lead-text">Lorem ipsumLorem ipsum</div>
                                            <h2 class="header_style-2">Lorem ipsumLorem ipsum</h2>
                                            <div class="callout_style-1">
                                                <p>Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem
                                                    ipsumLorem ipsum</p>
                                                <p>
                                                    <a href="/academics/majors-programs" class="btn btn-160 btn-outline-white">Lorem
                                                        ipsum</a>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default Section3;

Answer 1

Read the error. You need to wrap your JSX in fragments. React cannot render a component with multiple children, you should wrap all of the JSX with an opening <> tag and closing </> tag, like this:

import React, { Component } from "react";
import "../css/section3.css";
class Section3 extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <>
        <section>
          <div class="product-banners wt-offset-top-24">
            ...
          </div>
        </section>
        <div class="section-content _bg-extra-dark home-page__section-content _appreciated">
          <div class="page-segment pad segment-skyblue">
            ...
          </div>
        </div>
      </>
    );
  }
}

export default Section3;

Note: as Matt pointed out, it doesn't have to be a fragment, it can be a div too or some other tag.

Answer 2

You need to wrap everything in a tag.

You could use Fragment which does not create a DOM element and do something like :

import React, { Component, Fragment } from "react"
import "../css/section3.css"
class Section3 extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        return(
        <Fragment>
            <section>
                ....
            </section>
            <div class="section-content _bg-extra-dark home-page__section-content _appreciated">
                ....
           </div>
        </Fragment>
    );
}
}

export default Section3;

Answer 3

You need to read your error:

ERROR in ./src/components/section3.js Module build failed (from ./node_modules/gatsby/dist/utils/babel-loader.js): SyntaxError: /path/src/components/section3.js: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...? (26:8)

Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...? What does it mean?

JSX items must be wraped in one enclosing tag only:

BAD

return(
 <div>This></div>
 <div>is></div>
 <div>Bad></div>
)

GOOD

return(
 <div>
   <div>This></div>
   <div>is></div>
   <div>Good></div>
 </div>
)

Just wrap everything in a <div/> , I already did it for you, so just wrap the code and use it!

import React, { Component } from 'react';
import '../css/section3.css';

class Section3 extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <section>
          <div class="product-banners wt-offset-top-24">
            <div class="product-banners__item _toolbox">
              <h3 class="product-banners__title _color-light">Lorem ipsum</h3>
              <div class="product-banners__btn-wrap wt-offset-top-12">
                <a
                  class="wt-button wt-button_theme_dark wt-button_size_m wt-button_mode_outline"
                  href="/toolbox/app/">
                  Lorem ipsum
                </a>
              </div>
            </div>
            <div class="product-banners__item _annual-report">
              <h3 class="product-banners__title">Lorem ipsum</h3>
              <div class="product-banners__btn-wrap wt-offset-top-12">
                <a
                  class="wt-button wt-button_size_m wt-button_mode_outline"
                  href="/annualreport/2018/">
                  Lorem ipsum
                </a>
              </div>
            </div>
          </div>
        </section>
        <div class="section-content _bg-extra-dark home-page__section-content _appreciated">
          <div class="page-segment pad segment-skyblue">
            <div class="large-image-block">
              <div class="large-image-block_wrap-img flipped">
                <div class="large-image-block_img">
                  <img src="image-path" alt="" />
                </div>
              </div>
              <div class="large-image-block_wrap">
                <div class="container">
                  <div class="row">
                    <div class="large-image-block_col col-md-5 col-lg-4 col-lg-offset-1 col-md-push-6 col-lg-push-5">
                      <div class="large-image-block_video" />
                    </div>
                    <div class="large-image-block_col col-md-5 col-lg-4 col-md-offset-2 col-lg-offset-3 col-md-pull-7 col-lg-pull-8">
                      <div class="red_content centered">
                        <div class="lead-text">Lorem ipsumLorem ipsum</div>
                        <h2 class="header_style-2">Lorem ipsumLorem ipsum</h2>
                        <div class="callout_style-1">
                          <p>
                            Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem
                            ipsumLorem ipsumLorem ipsumLorem ipsum
                          </p>
                          <p>
                            <a
                              href="/academics/majors-programs"
                              class="btn btn-160 btn-outline-white">
                              Lorem ipsum
                            </a>
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Section3;

Answer 4

Baldráni's answer is correct, but he did't explain why it is needed.

By default, any component that receives a child only accepts 1 component as it's children.

So, this could be an error:

<Component>
    <div>something</div>
    <div>other thing</div>
</Component>

Some components, like <div> , accept multiple components as children, so the below should be ok:

<div>
    <div>something</div>
    <div>other thing</div>
</div>

But, when you declare a standalone component with 2 divs, like the below, React has no way of knowing if you are going to use it as the only child of another component.

// YourComponent.js
    <div>something</div>
    <div>other thing</div>

So you can wrap it in a Fragment to return only one component:

// YourComponent.js
<React.Fragment>
    <div>something</div>
    <div>other thing</div>
</React.Fragment>

A way nicer syntax would be:

// YourComponent.js
<>
    <div>something</div>
    <div>other thing</div>
</>

Fragment does not create a new element at the DOM, it simply groups the children element.

Check the docs for official explanation