JSX element 'body' has no corresponding closing tag
Question
I am creating a landing page on react.js. It is a page where users who aren't signed up have a page where they can signup for the website if they want to. However, I have some errors including one on the <body> tag where it says "JSX element 'body' has no corresponding closing tag." Can anyone help me solve this issue?
function Landing() {
return (
<body>
<header>
<div class="container">
<h1 class="school-logo-text float-left">
<a href="#"><strong>Direct</strong> Connection</a>
</h1>
<div class="site-header__menu group">
<nav class="main-navigation">
<ul>
<li><a href="Events.html">Events</a></li>
<li><a href="blog.html">Blog</a></li>
</ul>
</nav>
<div class="site-header__util">
<a href="login.html" class="btn btn--small btn--orange float-left push-right">Login</a>
<form class="" action="front-page.html" method="post"></form>
<input type="text" name="value" value="" placeholder="Search DC"></input>
<input type="submit" name=""></input>
</div>
</div>
</div>
</header>
<div class="page-banner">
<div class="page-banner__bg-image" style="background-image: url(images/connection.jpg); height: 579px;
width: 100%;"></div>
<div class="page-banner__content container t-center c-white">
<h1 class="headline headline--large">Direct Connection</h1>
<a href="" class="btn btn--large btn--blue">Companies</a>
<div class="row">
<div class="col-xs-12 col-md-10 col-md-offset-1-text-center white">
<h1>What DC has to offer</h1>
<p>DC is a company that makes connecting faster, easier and more convenient. We can help you and your company to get your personal
or business name out there. We are the first Online Company convention center.
You will find yourself traveling through a variety of companies that you can interact with online. You
can locate a company and immediately request open bids on projects, connect with different departments through the company, send payment and receive payment,
find the next date that company will be interacting and do live meetings and marketing via zoom, webinars, skype and much more. Think as if you just saved yourself hours on
end locating your next company project and add a few members to your team along the way.
Find what request application forms and highly qualified employees connected to Companies that Qualified employees, future investors, employees
with other swap company information swap, quotes send quotes, futuristic, billing processing. DC connections can help get companies` portfolios easily available.</p>
</div>
</div>
<div class="full-width-split group">
<div class="full-width-split__one">
<div class="full-width-split__inner">
<h2 class="headline headline--small-plus t-center">Upcoming Events</h2>
<div class="event-summary">
<a class="event-summary__date t-center" href="#">
<span class="event-summary__month">Mar</span>
<span class="event-summary__day">25</span>
</a>
<div class="event-summary__content">
<h5 class="event-summary__title headline headline--tiny"><a href="#">Traffic Control Items</a></h5>
<p>We will have a discussion to discuss any traffic control items any company needs for improvement<a href="#" class="nu gray">Learn more</a></p>
</div>
</div>
<div class="event-summary">
<a class="event-summary__date t-center" href="#">
<span class="event-summary__month">Apr</span>
<span class="event-summary__day">02</span>
</a>
<div class="event-summary__content">
<h5 class="event-summary__title headline headline--tiny"><a href="#">Chattanooga Traffic Plan</a></h5>
<p>In this event, we will discuss how we need to set up for lane closures. <a href="#" class="nu gray">Learn more</a></p>
</div>
</div>
<p class="t-center no-margin"><a href="#" class="btn btn--blue">View All Events</a></p>
</div>
</div>
<div class="full-width-split__two">
<div class="full-width-split__inner">
<h2 class="headline headline--small-plus t-center">From Our Blogs</h2>
<div class="event-summary">
<a class="event-summary__date event-summary__date--beige t-center" href="">
<span class="event-summary__month">Dec</span>
<span class="event-summary__day">29</span>
</a>
<div class="event-summary__content">
<h5 class="event-summary__title headline headline--tiny"><a href="">Welcome Southern Company</a></h5>
<p>Southern Company has decided to join our community! <a href="" class="nu gray">Read more</a></p>
</div>
</div>
<p class="t-center no-margin"><a href="http://direct-connection.local/blog" class="btn btn--yellow">View All Blog Posts</a></p>
</div>
</div>
</div>
<footer class="site-footer">
<div class="site-footer__inner container container--narrow">
<div class="group">
<div class="site-footer__col-one">
<h1 class="school-logo-text school-logo-text--alt-color">
<a href="index.html"><strong>Direct</strong> Connection</a>
</h1>
<p><a class="site-footer__link" href="index.html">706-263-0175</a></p>
</div>
</div>
</div>
</footer>
</body>
)
}
export default Landing
2 answers
solution1
2 ACCPTED 2023-01-16 20:46:46
Pasting your html into the w3c markup validator shows a few errors. You've got two divs which are not closed, and you have </input> closing tags - which aren't a thing.
Have a look at the markup validator, it points out specifically what you've got wrong.
solution2
1 2023-01-16 20:52:39
You got the error because you missed two closing <div> tags. It was an easy mistake due to the absence of good code formatting, as your file became long and deeply nested.
I will also advise refactoring and splitting into components to aid maintainability. Also, <input /> tags in HTML5 are self-closing tags. You need not write it like so: <input></input> .
Below is a formatted and fixed version of your code:
return (
<body>
<header>
<div class="container">
<h1 class="school-logo-text float-left">
<a href="#"><strong>Direct</strong> Connection</a>
</h1>
<div class="site-header__menu group">
<nav class="main-navigation">
<ul>
<li><a href="Events.html">Events</a></li>
<li><a href="blog.html">Blog</a></li>
</ul>
</nav>
<div class="site-header__util">
<a href="login.html" class="btn btn--small btn--orange float-left push-right">Login</a>
<form class="" action="front-page.html" method="post"></form>
<input type="text" name="value" value="" placeholder="Search DC"></input>
<input type="submit" name=""></input>
</div>
</div>
</div>
</header>
<div class="page-banner">
<div class="page-banner__bg-image" style="background-image: url(images/connection.jpg); height: 579px;
width: 100%;"></div>
<div class="page-banner__content container t-center c-white">
<h1 class="headline headline--large">Direct Connection</h1>
<a href="" class="btn btn--large btn--blue">Companies</a>
<div class="row">
<div class="col-xs-12 col-md-10 col-md-offset-1-text-center white">
<h1>What DC has to offer</h1>
<p>DC is a company that makes connecting faster, easier and more convenient. We can help you and your company to get your personal
or business name out there. We are the first Online Company convention center.
You will find yourself traveling through a variety of companies that you can interact with online. You
can locate a company and immediately request open bids on projects, connect with different departments through the company, send payment and receive payment,
find the next date that company will be interacting and do live meetings and marketing via zoom, webinars, skype and much more. Think as if you just saved yourself hours on
end locating your next company project and add a few members to your team along the way.
Find what request application forms and highly qualified employees connected to Companies that Qualified employees, future investors, employees
with other swap company information swap, quotes send quotes, futuristic, billing processing. DC connections can help get companies` portfolios easily available.
</p>
</div>
</div>
<div class="full-width-split group">
<div class="full-width-split__one">
<div class="full-width-split__inner">
<h2 class="headline headline--small-plus t-center">Upcoming Events</h2>
<div class="event-summary">
<a class="event-summary__date t-center" href="#">
<span class="event-summary__month">Mar</span>
<span class="event-summary__day">25</span>
</a>
<div class="event-summary__content">
<h5 class="event-summary__title headline headline--tiny"><a href="#">Traffic Control Items</a></h5>
<p>We will have a discussion to discuss any traffic control items any company needs for improvement<a href="#" class="nu gray">Learn more</a></p>
</div>
</div>
<div class="event-summary">
<a class="event-summary__date t-center" href="#">
<span class="event-summary__month">Apr</span>
<span class="event-summary__day">02</span>
</a>
<div class="event-summary__content">
<h5 class="event-summary__title headline headline--tiny"><a href="#">Chattanooga Traffic Plan</a></h5>
<p>In this event, we will discuss how we need to set up for lane closures. <a href="#" class="nu gray">Learn more</a></p>
</div>
</div>
<p class="t-center no-margin"><a href="#" class="btn btn--blue">View All Events</a></p>
</div>
</div>
<div class="full-width-split__two">
<div class="full-width-split__inner">
<h2 class="headline headline--small-plus t-center">From Our Blogs</h2>
<div class="event-summary">
<a class="event-summary__date event-summary__date--beige t-center" href="">
<span class="event-summary__month">Dec</span>
<span class="event-summary__day">29</span>
</a>
<div class="event-summary__content">
<h5 class="event-summary__title headline headline--tiny"><a href="">Welcome Southern Company</a></h5>
<p>Southern Company has decided to join our community! <a href="" class="nu gray">Read more</a></p>
</div>
</div>
<p class="t-center no-margin"><a href="http://direct-connection.local/blog" class="btn btn--yellow">View All Blog Posts</a></p>
</div>
</div>
</div>
</div>
</div>
<footer class="site-footer">
<div class="site-footer__inner container container--narrow">
<div class="group">
<div class="site-footer__col-one">
<h1 class="school-logo-text school-logo-text--alt-color">
<a href="index.html"><strong>Direct</strong> Connection</a>
</h1>
<p><a class="site-footer__link" href="index.html">706-263-0175</a></p>
</div>
</div>
</div>
</footer>
</body>
)
}
export default Landing
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
jsx element 'div' has no corresponding closing tag help plis
JSX fragment has no corresponding closing tag
I am getting this error in react : JSX element 'h1' has no corresponding closing tag
JSX has no corresponding closing tag. ts(17014)
Expected corresponding JSX closing tag for input Reactjs
JSX: Expected corresponding closing tag for <div>
SyntaxError: Expected corresponding JSX closing tag for <a>. Line (17:9)
Expected corresponding JSX closing tag for <Navbar.Collapse> (16:12)
React - Parsing error: Expected corresponding JSX closing tag for <input>
Parsing error: Expected corresponding JSX closing tag for <CCol>
Related Tags