How can I do to see "The text is saved." after clicking on submit on my modal?

I have a modal and I am trying to have only this text on my modal after clicking on submit : "The text is saved.". Di you know how can I do to get that ?

I mean I have that :

Initial

and when I cick on submit I want that :

Goal

Here is my code :

import React, { Fragment } from "react";
import { render } from "react-dom";
import "./style.css";
import { ModalButton } from "react-modal-button";

const App = () => (
  <div className="container">
    <h1 className="title">React Modal Button</h1>
    <hr />

    <ModalButton
      buttonClassName="button"
      windowClassName="window-container"
      height={400}
      modal={(props) => (
        <Fragment>
          <header className="modal-card-head">Title</header>
          <div className="modal-card-body">
            Content
            <input class="input" type="text" placeholder="Text input" />
            <hr />
            <textarea class="textarea" placeholder="e.g. Hello world" />
          </div>
          <footer className="modal-card-foot u-justify-content--flex-end ">
            <button onClick={props.closeModal} className="button">
              Cancel
            </button>
            <button className="button is-primary">Submit</button>
          </footer>
        </Fragment>
      )}
    >
      Open Modal
    </ModalButton>

    <hr />
    <ModalButton
      buttonClassName="button"
      windowClassName="window-container"
      modal={(props) => (
        <Fragment>
          <header className="modal-card-head">Title</header>
          <div className="modal-card-body">Content</div>
          <button onClick={props.closeModal} className="button">
            Cancel
          </button>
        </Fragment>
      )}
    >
      Open Another Modal
    </ModalButton>
  </div>
);

render(<App />, document.getElementById("root"));

Or there My code

Do you know how can I do ?

Thank you very much !

21 thoughts on “How can I do to see "The text is saved." after clicking on submit on my modal?”

  1. here is how you can do it, I have created a function named "handleSubmitClicked" that will be triggered whenever submit will be clicked, you can add code of show modal there

    import React, { Fragment } from "react";
    import { render } from "react-dom";
    import "./style.css";
    import { ModalButton } from "react-modal-button";
    
    function handleSubmitClicked() {
        alert('submit clicked')
    }
    
    const App = () => (
    
      <div className="container">
        <h1 className="title">React Modal Button</h1>
        <hr />
    
        <ModalButton
          buttonClassName="button"
          windowClassName="window-container"
          height={400}
          modal={(props) => (
            <Fragment>
              <header className="modal-card-head">Title</header>
              <div className="modal-card-body">
                Content
                <input class="input" type="text" placeholder="Text input" />
                <hr />
                <textarea class="textarea" placeholder="e.g. Hello world" />
              </div>
              <footer className="modal-card-foot u-justify-content--flex-end ">
                <button onClick={props.closeModal} className="button">
                  Cancel
                </button>
                <button onClick={() => {handleSubmitClicked()}}
                        className="button is-primary">Submit</button>
              </footer>
            </Fragment>
          )}
        >
          Open Modal
        </ModalButton>
    
        <hr />
        <ModalButton
          buttonClassName="button"
          windowClassName="window-container"
          modal={(props) => (
            <Fragment>
              <header className="modal-card-head">Title</header>
              <div className="modal-card-body">Content</div>
              <button onClick={props.closeModal} className="button">
                Cancel
              </button>
            </Fragment>
          )}
        >
          Open Another Modal
        </ModalButton>
      </div>
    );
    
    render(<App />, document.getElementById("root"));
    
    Reply

Leave a Comment