How can i close model in react js after i click form submit button?

Question

I am trying to close the Jquery model in react js close after submitting the form button but I tried to use jquery code but I was not able so I don't know how to close after submitting the button.So please help me how to close this model after submit

Here is my full code.

import React, { Component } from "react";
import config from "../config";
import Demo from "./Demo";
import Electric from "./Electric";
import "./index";

export class Report extends Component {
  constructor(props) {
    super(props);
    this.state = {
      movies: [],
      selectOptions: [],
      show: false
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleClose = this.handleClose.bind(this);
  }

  handleClose() {
    this.setState({ show: false });
  }

  handleChange = e => {
    let target = e.target;
    let name = target.name;
    //here
    let value = Array.from(target.selectedOptions, option => option.value);
    this.setState({
      [name]: value
    });
  };

  async componentDidMount() {
    try {
      const res = await fetch(config.apiUrl.reportModel);
      const movies = await res.json();
      // console.log(report);
      this.setState({
        movies
      });
    } catch (e) {
      console.log(e);
    }
  }
  render() {
    return (
<div>
<a
        className="btn btn-success btn-sm bb pull-right "
        href="#ex1"
        rel="modal:open" >Open Model </a>


      <div
        id="ex1"
        class="modal"
        style={{ height: "auto", position: "relative", maxWidth: "600px" }}
      >
        <h5 className=" font-weight-bold text-dark text-left"> MAPA </h5>
        <form
          onSubmit={this.props.loaddata}
          id="frmStudent"
          style={{ marginTop: "20px" }}
        >
          <Demo />
          <ul class="nav nav-pills">
            <li class="active">
              <a
                data-toggle="pill"
                href="#home"
                className="nav-link btn-outline-success"
              >
                Uzytkownik
              </a>
            </li>
            <li>
              <a
                data-toggle="pill"
                href="#menu1"
                className=" nav-link btn-outline-success"
              >
                Elektryczny
              </a>
            </li>
            <li>
              <a
                data-toggle="pill"
                href="#menu2"
                className=" nav-link btn-outline-success"
              >
                Klasyczny
              </a>
            </li>
            <li>
              <a
                data-toggle="pill"
                href="#menu3"
                className="nav-link btn-outline-success"
              >
                Pieszo
              </a>
            </li>
          </ul>

          <br></br>

          <div class="tab-content">
            <div id="home" class="tab-pane fade in active">
              <label>Select User</label>
              <select
                name="selectOptions"
                multiple={true}
                id="selectOptions"
                className="form-control"
                onChange={this.handleChange}
                value={this.state.selectOptions}
                style={{
                  width: "200px",
                  color: "rgba(19, 183, 96, 1.0)"
                }}
              >
                {this.state.movies.map(c => (
                  <option value={c.pk}>{c.user1}</option>
                ))}
              </select>

              <br></br>
              <label>Select Mode</label>
              <select
                multiple
                className="form-control btn-block"
                id="exampleFormControlSelect2 btn-block"
                style={{
                  width: "200px",
                  color: "rgba(19, 183, 96, 1.0)"
                }}
                name="modee"
              >
                <option value="">None</option>
                <option value="foot">Pieszo</option>
                <option value="bike">Rower Klasyczny</option>
                <option value="electric-bike">Rower Elektryczny</option>
              </select>
            </div>
            <div id="menu1" class="tab-pane fade">
              <label>Select Elektryczny </label>
              <Electric />
            </div>
            <div id="menu2" class="tab-pane fade">
              <label>Select Rower Klasyczny User</label>
              <select
                multiple={true}
                className="form-control btn-block"
                id="exampleFormControlSelect2 btn-block"
                style={{
                  width: "200px",
                  color: "rgba(19, 183, 96, 1.0)"
                }}
                // name="idd"
              >
                {this.state.movies.map(c => (
                  <option value={c.pk}>CB-{c.user1}</option>
                ))}
              </select>
            </div>
            <div id="menu3" class="tab-pane fade">
              <label>Select Pieszo User</label>
              <select
                multiple={true}
                // value={this.state.value}
                // onChange={this.handleChange}
                className="form-control btn-block"
                id="exampleFormControlSelect2 btn-block"
                style={{
                  width: "200px",
                  color: "rgba(19, 183, 96, 1.0)"
                }}
                // name="idd"
              >
                {this.state.movies.map(c => (
                  <option value={c.pk}>{c.user1}</option>
                ))}
              </select>
            </div>
          </div>

          <br></br>
          {/*  */}

          <center>
            <button
              type="submit"
              value="Get Data"
              className="btn btn-success active hide"
              id="button"
              rel="modal:close" // I used also jquery close but it did not work
              onClick={this.handleClose} // it also did not work
              style={{
                width: "200px",
                background: "rgba(19, 183, 96, 1.0)",
                padding: "7px",
                marginTop: "15px",
                marginBottom: "15px",
                fontWeight: "500"
              }}
            >
              Raport
            </button>
          </center>
        </form>
      </div>
     </div>
    );
  }
}

export default Report;

I tried alot but i failed all the time i hope you will understand from my code hope i will get help and i will resolve problem

Answer 1

You almost there, need to tweak a bit in your form, In the form onSubmit button u need to create function eg handleSubmitButton

handleSubmitButton(e) {
    e.preventDefault()

    this.handleClose(); <--- This is where the function need to put
}

On the side note, dont forget to bind handleSubmitButton.

Let me know if it works

Cheers, Fido