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 >
<h1 >
<a href="#"><strong>Direct</strong> Connection</a>
</h1>
<div >
<nav >
<ul>
<li><a href="Events.html">Events</a></li>
<li><a href="blog.html">Blog</a></li>
</ul>
</nav>
<div >
<a href="login.html" >Login</a>
<form 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 >
<div style="background-image: url(images/connection.jpg); height: 579px;
width: 100%;"></div>
<div >
<h1 >Direct Connection</h1>
<a href="" >Companies</a>
<div >
<div >
<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 >
<div >
<div >
<h2 >Upcoming Events</h2>
<div >
<a href="#">
<span >Mar</span>
<span >25</span>
</a>
<div >
<h5 ><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="#" >Learn more</a></p>
</div>
</div>
<div >
<a href="#">
<span >Apr</span>
<span >02</span>
</a>
<div >
<h5 ><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="#" >Learn more</a></p>
</div>
</div>
<p ><a href="#" >View All Events</a></p>
</div>
</div>
<div >
<div >
<h2 >From Our Blogs</h2>
<div >
<a href="">
<span >Dec</span>
<span >29</span>
</a>
<div >
<h5 ><a href="">Welcome Southern Company</a></h5>
<p>Southern Company has decided to join our community! <a href="" >Read more</a></p>
</div>
</div>
<p ><a href="http://direct-connection.local/blog" >View All Blog Posts</a></p>
</div>
</div>
</div>
<footer >
<div >
<div >
<div >
<h1 >
<a href="index.html"><strong>Direct</strong> Connection</a>
</h1>
<p><a href="index.html">706-263-0175</a></p>
</div>
</div>
</div>
</footer>
</body>
)
}
export default Landing
CodePudding user response：
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.
CodePudding user response：
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 >
<h1 >
<a href="#"><strong>Direct</strong> Connection</a>
</h1>
<div >
<nav >
<ul>
<li><a href="Events.html">Events</a></li>
<li><a href="blog.html">Blog</a></li>
</ul>
</nav>
<div >
<a href="login.html" >Login</a>
<form 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 >
<div style="background-image: url(images/connection.jpg); height: 579px;
width: 100%;"></div>
<div >
<h1 >Direct Connection</h1>
<a href="" >Companies</a>
<div >
<div >
<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 >
<div >
<div >
<h2 >Upcoming Events</h2>
<div >
<a href="#">
<span >Mar</span>
<span >25</span>
</a>
<div >
<h5 ><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="#" >Learn more</a></p>
</div>
</div>
<div >
<a href="#">
<span >Apr</span>
<span >02</span>
</a>
<div >
<h5 ><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="#" >Learn more</a></p>
</div>
</div>
<p ><a href="#" >View All Events</a></p>
</div>
</div>
<div >
<div >
<h2 >From Our Blogs</h2>
<div >
<a href="">
<span >Dec</span>
<span >29</span>
</a>
<div >
<h5 ><a href="">Welcome Southern Company</a></h5>
<p>Southern Company has decided to join our community! <a href="" >Read more</a></p>
</div>
</div>
<p ><a href="http://direct-connection.local/blog" >View All Blog Posts</a></p>
</div>
</div>
</div>
</div>
</div>
<footer >
<div >
<div >
<div >
<h1 >
<a href="index.html"><strong>Direct</strong> Connection</a>
</h1>
<p><a href="index.html">706-263-0175</a></p>
</div>
</div>
</div>
</footer>
</body>
)
}
export default Landing