提交表单时更改引导模式的内容

Question

I have created a navbar component which, when you click on a certain button, a modal box pops up. Within this modal box is a form. When the form is completed (when all the required fields are filled in) and the user clicks the 'Add' button, I want the form to disappear from the modal box and for a message to appear instead saying 'Completion successful'. I also wanted to show a React loading spinner for around 5 seconds before the completion shows. Here is my Modal component -

function AddSystemModal(props: any) {
  return (
    <Modal
      {...props}
      size="lg"
      aria-labelledby="contained-modal-title-vcenter"
      centered
    >
      <Modal.Header closeButton>
        <Modal.Title id="contained-modal-title-vcenter">
          Add New System
        </Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <SystemForm />
      </Modal.Body>
      <Modal.Footer></Modal.Footer>
    </Modal>
  );
}

export { AddSystemModal };

Here is my form component ( a bit messy ). At the moment I managed to get a spinner to appear when the 'Add' button is clicked but in terms of clearing the contents of the modal etc. I am stuck.

function SystemForm() {
  const [validated, setValidated] = useState(false);

  const [showSpinner, setShowSpinner] = React.useState(false);
  const changeModal = () => setShowSpinner(true);

  const LoadingSpinner = () => (
    <div id="spinner" className="loading-spinner">
      <Spinner animation="border" role="status">
        <span className="sr-only">Loading...</span>
      </Spinner>
    </div>
  );

  const handleSubmit = (event) => {
    const form = event.currentTarget;
    if (form.checkValidity() === false) {
      event.preventDefault();
      event.stopPropagation();
    }
    setValidated(true);
  };

  return (
    <Form noValidate validated={validated} onSubmit={handleSubmit}>
      <Form.Row>
        <Form.Group as={Col} md="4" controlId="validationCustom01">
          <Form.Label>ID</Form.Label>
          <Form.Control
            required
            type="text"
            placeholder="Leave Blank For New System"
            defaultValue=""
          />
        </Form.Group>
        <Form.Group as={Col} md="4" controlId="validationCustom02">
          <Form.Label>Name</Form.Label>
          <Form.Control
            required
            type="text"
            placeholder="Name"
            defaultValue=""
          />
          <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
        </Form.Group>
        <Form.Group controlId="exampleForm.SelectCustomSizeLg">
          <Form.Label>Allow Multiple Xref</Form.Label>
          <Form.Control as="select" custom required>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </Form.Control>
          <Form.Control.Feedback type="invalid">
            Please select an option.
          </Form.Control.Feedback>
        </Form.Group>
      </Form.Row>
      <Form.Row>
        <Form.Group controlId="exampleForm.SelectCustomSizeLg">
          <Form.Label>Status Code</Form.Label>
          <Form.Control as="select" custom required>
            <option>Available</option>
            <option>Blah</option>
            <option>Blah</option>
          </Form.Control>
          <Form.Control.Feedback type="invalid">
            Please provide a valid status code.
          </Form.Control.Feedback>
        </Form.Group>
        <Form.Group as={Col} md="3" controlId="validationCustom04">
          <Form.Label>Last Modified By</Form.Label>
          <Form.Control type="text" placeholder="" />
        </Form.Group>
      </Form.Row>
      <Button onClick={changeModal} type="submit">
        Add
      </Button>
      <div>{showSpinner ? <LoadingSpinner /> : null}</div>
    </Form>
  );
}

I have tried googling to see how I can clear the contents of something in React but haven't been able to find much. I am wondering if this is due to how I have arranged the component and whether I need to have two separate components for inside the modal and conditionally render them depending on if the user has clicked 'Add'.

Apologies if this is a bad question - I am new to learning React!

Answer 1

This is how I would do it...

• Have the formSubmission flag in the parent which is triggered when form is submitted inside the modal - this will ensure that on repeated modal display, the form isn't showed
• Have a buttonClicked flag inside the modal to know when to show/hide the spinner
• I trust you to manage the exact field, design etc. the demo shows the steps where I think you're stuck

relevant parent component:

import React, { useState } from "react";
import ModalExample from "./modal";
import Child from "./child";
import ModalExample from "./modal";

const MyNav = () => {
  const [formSubmitted, setFormSubmitted] = useState(false);

  const handleClick = () => {
    console.log('inside hooks handleClick');
    setFormSubmitted(true);
  }

  return (
    <>
      <nav>
        Navigation
        <ModalExample
          buttonLabel="click Me to fire the modal inside navigation"
          myName={'name'}
          formSubmissionStatus={formSubmitted}
          handleClick={handleClick}
        />
      </nav>
    </>
  );
};

export default MyNav;

relevant Modal component:

import React, { useState } from "react";
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
import { Form, FormGroup, Label, Input, FormText } from "reactstrap";

const ModalExample = props => {
  const { buttonLabel, className, myName, formSubmissionStatus } = props;

  const [modal, setModal] = useState(false);
  const [spinner, setSpinner] = useState(false);
  const [buttonClicked, setButtonClicked] = useState(false);

  const toggle = () => setModal(!modal);

  const ModalClicked = () => {
    console.log("inside ModalClicked");
    setButtonClicked(true);
    setTimeout(() => {
      setSpinner(false);
      props.handleClick();
    }, 1500);
  };

  return (
    <div>
      <Button color="danger" onClick={toggle}>
        {buttonLabel}
      </Button>
      <Modal isOpen={modal} toggle={toggle} className={className}>
        <ModalHeader toggle={toggle}>Modal title</ModalHeader>
        <ModalBody>
          {formSubmissionStatus ? (
            <>
              <p>Form is submitted</p>
            </>
          ) : buttonClicked ? (
            <img src="https://i.ya-webdesign.com/images/loading-png-gif.gif" />
          ) : (
            <Form>
              <FormGroup>
                <Label for="exampleEmail">Email</Label>
                <Input
                  type="email"
                  name="email"
                  id="exampleEmail"
                  placeholder="with a placeholder"
                />
              </FormGroup>
              <FormGroup>
                <Label for="examplePassword">Password</Label>
                <Input
                  type="password"
                  name="password"
                  id="examplePassword"
                  placeholder="password placeholder"
                />
              </FormGroup>
            </Form>
          )}
        </ModalBody>
        <ModalFooter>
          <button onClick={ModalClicked} type="button">
            {myName}
          </button>
        </ModalFooter>
      </Modal>
    </div>
  );
};

export default ModalExample;

complete working stackblitz here