How to open a modal after a success axios request

Question

I have a class component (Contact.js) who has the functionality of send a POST request (using axios) to another app that I have (in Node using Nodemailer) and that app send a email. Its works fine, but I don't know how to open a Modal (or Toast) if the response of the request is ok. To be more clear this is my component (I remove several lines of code who don't matter for this problem so the code is smaller so if u see that something is missing don't worry the app send the request ok, the response come ok and the mail is sent).

In the ``response === "success"``` I want to open a modal, but it doesn't work (I'm pretty new of React so I don't know what I'm doing wrong)

class Contact extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      email: "",
      message: "",
      subject: "",
    };
  }
  render() {
    return (
      <Styles>
        <Container id={this.props.id} className="contenedor">
          <Form
            id="contact-form"
            onSubmit={this.handleSubmit.bind(this)}
            method="POST"
          >
            <Row className="fila">
              <Col sm={12} md={6}>
                <Form.Group>
                  <Form.Label htmlFor="name">Nombre</Form.Label>
                  <Form.Control
                    required
                    type="text"
                    className="form-control"
                    placeholder="Ingrese su nombre"
                    value={this.state.name}
                    onChange={this.onNameChange.bind(this)}
                  />
                </Form.Group>
                
                ..ANOTHER THREE FORM.GROUP FOR EMAIL SUBJECT AND MESSAGE

                <Button type="submit" className="btn btn-dark btn-block">
                  Enviar
                </Button>
              </Col>
            </Row>
          </Form>
        </Container>
      </Styles>
    );
  }

  onNameChange(e) {
    this.setState({ name: e.target.value });
  }

  ... THE SAME HERE OF ABOVE, ANOTHER THREE FUNCTIONS FOR EMAIL, SUBJECT AND MESSAGE   

  resetForm() {
    this.setState({ name: "", email: "", message: "", subject: "" });
  }

  handleSubmit(e) {
    e.preventDefault();

    axios({
      method: "POST",
      url: "https://itis-mailer.herokuapp.com/send",
      data: this.state,
    }).then((response) => {
      if (response.data.status === "success") {
        <Modal.Dialog>
          <Modal.Header closeButton>
            <Modal.Title>Exito</Modal.Title>
          </Modal.Header>

          <Modal.Body>
            <p>La consulta fue enviada.</p>
          </Modal.Body>
        </Modal.Dialog>;
        this.resetForm();
      } else if (response.data.status === "fail") {
        alert("Error al enviar el mensaje");
      }
    });
  }
}

export default Contact;

Answer 1

You can open the model through state.

demo code:-

Code only to understand

function Example() {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);

return(
    <>
    <Modal show={show} onHide={handleClose}>
           <Modal.Header closeButton> .... </Modal.Header>
        </Model>
    </>
    )


axios({
    method: "POST",
    url: "https://itis-mailer.herokuapp.com/send",
    data: this.state,
}).then((response) => {
    if (response.data.status === "success") {
        setShow(true)
        this.resetForm();
    } else if (response.data.status === "fail") {
        alert("Error al enviar el mensaje");
    }
});

Answer 2

Your handleSubmit could be inside your component class so you could set a state for open a modal

Something like:

class Contact extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modalIsOpen: false,
    };
  }

  handleSubmit() {
    axios.call()
      .then(() => this.setState({
        modalIsOpen: true
      }));
  }
  render() {
    return ( 
      <>
        <modal isOpen={modalIsOpen}/>  
        <form>
        /* foo */
        </form>
      </>
    );
  }
}