React.js JSX Fragment errors and HTML missing Tags
Question
In Visual Studios code, it keeps telling me I am missing a <div> and <form> closing tag at the very end when I have closing tags for both. I have combed over my code multiple times and am convinced the error is not because of the closing tags but rather my use of fragments. I am new to React and as such don't know much about how to use fragments, and any insight would be much appreciated. Here is my code:
import React, { Component } from 'react';
export default class CreatePatient extends Component {
render(){
return(
<>
<section class="joinnetwork sec-apply">
<div class="container">
<div class="row text-center">
<div class="col-md-12">
<div class="border-line text-center"></div>
<h1>SIGN UP</h1>
</div>
</div>
</div>
</section>
<div class="container">
<div class="flip-sp">
<center>
<div class="icon">
<img src={ require('./img/logo-small.png') } />
</div>
</center>
</div>
</div>
<section class="contact-section area-padding">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<form class="form-contact contact_form" action="#" method="post" id="contactForm" >
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<input class="form-control" name="name" id="name" type="text" placeholder="NAME"></input>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<input class="form-control" name="email" id="email" type="email" placeholder="EMAIL"></input>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<input class="form-control" name="phone" id="phone" type="text" placeholder="PHONE NUMBER"></input>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<input class="form-control" name="age" id="age" type="text" placeholder="AGE"></input>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<input class="form-control" name="city" id="city" type="text" placeholder="CITY"></input>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<select id="state" class="form-control" name="state" form="state">
<option value="STATE">STATE</option>
<option value="ALABAMA">ALABAMA</option>
<option value="ALASKA">ALASKA</option>
<option value="ARIZONA">ARIZONA</option>
</select>
</div>
</div>
<div class="col-sm-8">
<div class="col-sm-12">
<div class="form-group">
<p> FAMILY SIZE (INCLUDE YOUR SELF)</p>
<input type="checkbox" id="person1" name="person1" value="person1"></input>
<label for="person1"> 1 Person</label><br></br>
<input type="checkbox" id="person2" name="person2" value="person2"></input>
<label for="person2"> 2 Person</label><br></br>
<input type="checkbox" id="person3" name="person3" value="person3"></input>
<label for="person3"> 3 Person</label><br></br>
<input type="checkbox" id="person4" name="person4" value="person4"></input>
<label for="person4"> 4 Person</label><br></br>
</div>
</div>
</div>
<div class="form-group mt-3 text-center">
<button type="submit" class="button button-contactForm">SUBMIT</button>
</div>
</form>
</div>
</div>
</div>
</section>
</>
)
}
}
When I run only the first two blocks of code (the first <section> and second <div> ) surrounded by a fragment <>...</> the code compiles and works, but it's only when I add this 3rd larger block where things mess up.
2 answers
solution1
1 ACCPTED 2020-07-19 16:22:38
you have missed corresponding closing for div. I have corrected it use the below code
<>
<section class="joinnetwork sec-apply">
<div class="container">
<div class="row text-center">
<div class="col-md-12">
<div class="border-line text-center"></div>
<h1>SIGN UP</h1>
</div>
</div>
</div>
</section>
<div class="container">
<div class="flip-sp">
<center>
<div class="icon">
<img src={require("./img/logo-small.png")} />
</div>
</center>
</div>
</div>
<section class="contact-section area-padding">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<form
class="form-contact contact_form"
action="#"
method="post"
id="contactForm"
>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<input
class="form-control"
name="name"
id="name"
type="text"
placeholder="NAME"
></input>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<input
class="form-control"
name="email"
id="email"
type="email"
placeholder="EMAIL"
></input>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<input
class="form-control"
name="phone"
id="phone"
type="text"
placeholder="PHONE NUMBER"
></input>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<input
class="form-control"
name="age"
id="age"
type="text"
placeholder="AGE"
></input>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<input
class="form-control"
name="city"
id="city"
type="text"
placeholder="CITY"
></input>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<select
id="state"
class="form-control"
name="state"
form="state"
>
<option value="STATE">STATE</option>
<option value="ALABAMA">ALABAMA</option>
<option value="ALASKA">ALASKA</option>
<option value="ARIZONA">ARIZONA</option>
</select>
</div>
</div>
</div>
<div class="col-sm-8">
<div class="col-sm-12">
<div class="form-group">
<p> FAMILY SIZE (INCLUDE YOUR SELF)</p>
<input
type="checkbox"
id="person1"
name="person1"
value="person1"
></input>
<label for="person1"> 1 Person</label>
<br></br>
<input
type="checkbox"
id="person2"
name="person2"
value="person2"
></input>
<label for="person2"> 2 Person</label>
<br></br>
<input
type="checkbox"
id="person3"
name="person3"
value="person3"
></input>
<label for="person3"> 3 Person</label>
<br></br>
<input
type="checkbox"
id="person4"
name="person4"
value="person4"
></input>
<label for="person4"> 4 Person</label>
<br></br>
</div>
</div>
</div>
<div class="form-group mt-3 text-center">
<button type="submit" class="button button-contactForm">
SUBMIT
</button>
</div>
</form>
</div>
</div>
</div>
</section>
</>
solution2
0 2020-07-19 16:20:43
You were missing a before the tag
Try this:
<>
<section class="joinnetwork sec-apply">
<div class="container">
<div class="row text-center">
<div class="col-md-12">
<div class="border-line text-center"></div>
<h1>SIGN UP</h1>
</div>
</div>
</div>
</section>
<div class="container">
<div class="flip-sp">
<center>
<div class="icon">
<img src={require('./img/logo-small.png')} />
</div>
</center>
</div>
</div>
<section class="contact-section area-padding">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<form class="form-contact contact_form" action="#" method="post" id="contactForm" >
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<input class="form-control" name="name" id="name" type="text" placeholder="NAME"></input>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<input class="form-control" name="email" id="email" type="email" placeholder="EMAIL"></input>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<input class="form-control" name="phone" id="phone" type="text" placeholder="PHONE NUMBER"></input>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<input class="form-control" name="age" id="age" type="text" placeholder="AGE"></input>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<input class="form-control" name="city" id="city" type="text" placeholder="CITY"></input>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<select id="state" class="form-control" name="state" form="state">
<option value="STATE">STATE</option>
<option value="ALABAMA">ALABAMA</option>
<option value="ALASKA">ALASKA</option>
<option value="ARIZONA">ARIZONA</option>
</select>
</div>
</div>
<div class="col-sm-8">
<div class="col-sm-12">
<div class="form-group">
<p> FAMILY SIZE (INCLUDE YOUR SELF)</p>
<input type="checkbox" id="person1" name="person1" value="person1"></input>
<label for="person1"> 1 Person</label><br></br>
<input type="checkbox" id="person2" name="person2" value="person2"></input>
<label for="person2"> 2 Person</label><br></br>
<input type="checkbox" id="person3" name="person3" value="person3"></input>
<label for="person3"> 3 Person</label><br></br>
<input type="checkbox" id="person4" name="person4" value="person4"></input>
<label for="person4"> 4 Person</label><br></br>
</div>
</div>
</div>
<div class="form-group mt-3 text-center">
<button type="submit" class="button button-contactForm">SUBMIT</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
</>
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
Locating errors in React.js return JSX statements
JSX adjacent on react.js
How to render an html entity in React.js without JSX
React.js Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?
HTML tags to JSX React Native
displaying mapped images in jsx react.js
Can't render html tags in a template string in react.js
How to render Html tags passed as string property in React.js
Escape a value in .map() in JSX of react.js
Errors with React.js project
Related Tags