rahul2001
Reputation: 1657
Trying to debug Adjacent JSX elements error
I keep getting a Adjacent JSX elements must be wrapped in an enclosing tag error.
How do you debug JSX and where are the errors?
var React = require('react');
var Home = React.createClass({
render: function () {
return (
<div>
<header>
<div className="container">
<div className="row">
<div className="col-md-12">
<h1>Hello World</h1>
<p className="lead">This is an Awesome App Landing Page</p>
<div className="carousel-iphone">
<div id="carousel-example-generic" className="carousel slide">
<ol className="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" className="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div className="carousel-inner">
<div className="item active">
<img src="img/screenshots/app-1.png" alt="App Screen 1"></img>
</div>
<div className="item">
<img src="img/screenshots/app-2.png" alt="App Screen 2" ></img>
</div>
<div className="item">
<img src="img/screenshots/app-3.png" alt="App Screen 3" ></img>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
</div>
<div>
<section className="purchase">
<div className="container">
<div className="row">
<div className="col-md-offset-2 col-md-8">
<h1>Everything's easily customizable.</h1>
<p className="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<button type="button" className="app-store"></button>
</div>
</div>
</div>
</section>
</div>
<div>
<section className="payoff">
<div className="container">
<div className="row">
<div className="col-md-12">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</h1>
</div>
</div>
</div>
</section>
</div>
<div>
<section className="detail">
<div className="container">
<div className="row">
<div className="col-md-12">
<div id="carousel-example-generic-2" className="carousel slide">
<div className="carousel-inner">
<div className="item active">
<div className="row">
<div className="col-sm-12 col-md-offset-1 col-md-6">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
<div className="col-sm-12 col-md-5">
<div className="app-screenshot">
<img src="img/screenshots/app-1.png" className="img-responsive" alt="App Screen 1">
</div>
</div>
</div>
</div>
<div className="item">
<div className="row">
<div className="col-sm-12 col-md-offset-1 col-md-6">
<h1>Sed do eiusmod tempor incididunt ut labore et dolore magna.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
<div className="col-sm-12 col-md-5">
<div className="app-screenshot">
<img src="img/screenshots/app-2.png" className="img-responsive" alt="App Screen 2">
</div>
</div>
</div>
</div>
<div className="item">
<div className="row">
<div className="col-sm-12 col-md-offset-1 col-md-6">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
<div className="col-sm-12 col-md-5">
<div className="app-screenshot">
<img src="img/screenshots/app-3.png" className="img-responsive" alt="App Screen 3">
</div>
</div>
</div>
</div>
</div>
<ol className="carousel-indicators">
<li data-target="#carousel-example-generic-2" data-slide-to="0" className="active"></li>
<li data-target="#carousel-example-generic-2" data-slide-to="1"></li>
<li data-target="#carousel-example-generic-2" data-slide-to="2"></li>
</ol>
</div>
</div>
</div>
</div>
</section>
</div>
<div>
<section className="features">
<div className="container">
<div className="row">
<div className="col-md-4">
<div className="circle"><i className="icon-bookmark"></i></div>
<h2>Quick & Easy Setup</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
<div className="col-md-4">
<div className="circle"><i className="icon-keypad"></i></div>
<h2>Parallax Scrolling</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
<div className="col-md-4">
<div className="circle"><i className="icon-like"></i></div>
<h2>Responsive Design</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
</div>
</div>
</section>
</div>
<div>
<section className="social">
<div className="container">
<div className="row">
<div className="col-md-12">
<h2>Connect with us</h2>
<a className="icon-facebook"></a>
<a className="icon-twitter"></a>
<a className="icon-google"></a>
<a className="icon-instagram"></a>
<a className="icon-pinterest"></a>
</div>
</div>
</div>
</section>
</div>
<div>
<section className="get-it">
<div className="container">
<div className="row">
<div className="col-md-12">
<h1>Avaialable now on the App Store</h1>
<p className="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<button type="button" className="app-store"></button>
</div>
<div className="col-md-12">
<hr />
<ul>
<li><a href="#link-here">Contact</a></li>
<li><a href="#link-here">Twitter</a></li>
<li><a href="#link-here">Press</a></li>
<li><a href="#link-here">Support</a></li>
<li><a href="#link-here">Developers</a></li>
<li><a href="#link-here">Privacy</a></li>
</ul>
</div>
</div>
</div>
</section>
</div>
);
}
});
module.exports = Home;
Upvotes: 0
Views: 112
Answers (1)
Pavan Ravipati
Reputation: 1870
The reason for that error is that you have several div's that are siblings to one another. The way to fix this is to enclose all the div's you have in your code by another enclosing tag (in your case it seems like another div tag should do the trick.
I added <div id="closingDiv">. I would give this code a try:
var React = require('react');
var Home = React.createClass({
render: function () {
return (
<div id="closingDiv">
<div>
<header>
<div className="container">
<div className="row">
<div className="col-md-12">
<h1>Hello World</h1>
<p className="lead">This is an Awesome App Landing Page</p>
<div className="carousel-iphone">
<div id="carousel-example-generic" className="carousel slide">
<ol className="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" className="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div className="carousel-inner">
<div className="item active">
<img src="img/screenshots/app-1.png" alt="App Screen 1"></img>
</div>
<div className="item">
<img src="img/screenshots/app-2.png" alt="App Screen 2" ></img>
</div>
<div className="item">
<img src="img/screenshots/app-3.png" alt="App Screen 3" ></img>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
</div>
<div>
<section className="purchase">
<div className="container">
<div className="row">
<div className="col-md-offset-2 col-md-8">
<h1>Everything\'s easily customizable.</h1>
<p className="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<button type="button" className="app-store"></button>
</div>
</div>
</div>
</section>
</div>
<div>
<section className="payoff">
<div className="container">
<div className="row">
<div className="col-md-12">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</h1>
</div>
</div>
</div>
</section>
</div>
<div>
<section className="detail">
<div className="container">
<div className="row">
<div className="col-md-12">
<div id="carousel-example-generic-2" className="carousel slide">
<div className="carousel-inner">
<div className="item active">
<div className="row">
<div className="col-sm-12 col-md-offset-1 col-md-6">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
<div className="col-sm-12 col-md-5">
<div className="app-screenshot">
<img src="img/screenshots/app-1.png" className="img-responsive" alt="App Screen 1">
</div>
</div>
</div>
</div>
<div className="item">
<div className="row">
<div className="col-sm-12 col-md-offset-1 col-md-6">
<h1>Sed do eiusmod tempor incididunt ut labore et dolore magna.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
<div className="col-sm-12 col-md-5">
<div className="app-screenshot">
<img src="img/screenshots/app-2.png" className="img-responsive" alt="App Screen 2">
</div>
</div>
</div>
</div>
<div className="item">
<div className="row">
<div className="col-sm-12 col-md-offset-1 col-md-6">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
<div className="col-sm-12 col-md-5">
<div className="app-screenshot">
<img src="img/screenshots/app-3.png" className="img-responsive" alt="App Screen 3">
</div>
</div>
</div>
</div>
</div>
<ol className="carousel-indicators">
<li data-target="#carousel-example-generic-2" data-slide-to="0" className="active"></li>
<li data-target="#carousel-example-generic-2" data-slide-to="1"></li>
<li data-target="#carousel-example-generic-2" data-slide-to="2"></li>
</ol>
</div>
</div>
</div>
</div>
</section>
</div>
<div>
<section className="features">
<div className="container">
<div className="row">
<div className="col-md-4">
<div className="circle"><i className="icon-bookmark"></i></div>
<h2>Quick & Easy Setup</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
<div className="col-md-4">
<div className="circle"><i className="icon-keypad"></i></div>
<h2>Parallax Scrolling</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
<div className="col-md-4">
<div className="circle"><i className="icon-like"></i></div>
<h2>Responsive Design</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
</div>
</div>
</section>
</div>
<div>
<section className="social">
<div className="container">
<div className="row">
<div className="col-md-12">
<h2>Connect with us</h2>
<a className="icon-facebook"></a>
<a className="icon-twitter"></a>
<a className="icon-google"></a>
<a className="icon-instagram"></a>
<a className="icon-pinterest"></a>
</div>
</div>
</div>
</section>
</div>
<div>
<section className="get-it">
<div className="container">
<div className="row">
<div className="col-md-12">
<h1>Avaialable now on the App Store</h1>
<p className="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<button type="button" className="app-store"></button>
</div>
<div className="col-md-12">
<hr />
<ul>
<li><a href="#link-here">Contact</a></li>
<li><a href="#link-here">Twitter</a></li>
<li><a href="#link-here">Press</a></li>
<li><a href="#link-here">Support</a></li>
<li><a href="#link-here">Developers</a></li>
<li><a href="#link-here">Privacy</a></li>
</ul>
</div>
</div>
</div>
</section>
</div>
</div>
);
}
});
module.exports = Home;
Upvotes: 1
Related Questions
- Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag
- ReactJS: Need help debugging
- JSX adjacent on react.js
- Error: Adjacent JSX elements must be wrapped in an enclosing tag
- React.js Error "Adjacent JSX elements must be wrapped in an enclosing tag"
- console error for react example webpage - a stateful component
- Debugging Javascript/ReactJS errors
- Finding error in jsx
- React child component render error
- How to find reactJS errors?