React.js JSX Fragment errors and HTML missing Tags

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.

Answer

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>
      </>
Source: stackoverflow
The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .