React Modal Submit Form

Question

I'm trying to print out a simple buttton clicked text whenever the submit button is click on my reactstrap modal and somehow my code doesn't do anything, not sure what I have wrong. I have attached a picture for better visualisation, I'm using reactstrap Modal.

import React, { useState } from "react";
import { Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
import Button from "./Button";

// NOTICE
// Modal is brought in with it's own trigger, so import the component where you want the trigger to be.

const ModalComponent = (props) => {
  const {
    buttonText,
    title,
    actionButtonText,
    cancelButtonText,
    children,
    className,
  } = props;

  const [modal, setModal] = useState(false);

  const toggle = () => setModal(!modal);
  const alertshow = () => {
    alert("button clicked");
  };

  const closeBtn = (
    <button className="close" onClick={toggle}>
      &times;
    </button>
  );

  return (
    <div>
      <a className="btn_link" onClick={toggle}>
        {buttonText}
      </a>
      <form onSubmit={alertshow}>
        <Modal isOpen={modal} toggle={toggle} className={className}>
          <ModalHeader className=" border-0" toggle={toggle} close={closeBtn}>
            {title}
          </ModalHeader>
          <ModalBody className="text-left border-0">
            <p className="modal-label">Please enter your email address</p>
            {children}
          </ModalBody>
          <ModalFooter className="modal-footer border-0">
            <Button className="btn_secondary modal-btn" onClick={toggle}>
              {cancelButtonText}
            </Button>{" "}
            &nbsp;&nbsp;
            <input
              className="btn btn_primary modal-btn"
              type="submit"
              value={actionButtonText}
            />
          </ModalFooter>
        </Modal>
      </form>
    </div>
  );
};

export default ModalComponent;

Answer 1

Its happening form should be part of modal not modal should be part of form . This is why its not referencing onSubmit . You need to do this:

<Modal isOpen={modal} toggle={toggle} className={className}>
        <form onSubmit={alertshow}>
         ...rest all content
         </Form>
</Modal>

Here is full code:

import React, { useState } from "react";
import "./styles.css";

import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from "reactstrap";

// NOTICE
// Modal is brought in with it's own trigger, so import the component where you want the trigger to be.

const ModalComponent = (props) => {
  const {
    buttonText,
    title,
    actionButtonText,
    cancelButtonText,
    children,
    className
  } = props;

  const [modal, setModal] = useState(false);

  const toggle = () => setModal(!modal);
  const alertshow = () => {
    alert("button clicked");
  };

  const closeBtn = (
    <button className="close" onClick={toggle}>
      &times;
    </button>
  );

  return (
    <div>
      <div onClick={toggle}>{buttonText}</div>
      <Modal isOpen={modal} toggle={toggle} className={className}>
        <form onSubmit={alertshow}>
          <ModalHeader className=" border-0" toggle={toggle} close={closeBtn}>
            {title}
          </ModalHeader>
          <ModalBody className="text-left border-0">
            <p className="modal-label">Please enter your email address</p>
            {children}
          </ModalBody>
          <ModalFooter className="modal-footer border-0">
            <Button className="btn_secondary modal-btn" onClick={toggle}>
              {cancelButtonText}
            </Button>{" "}
            &nbsp;&nbsp;
            <input
              className="btn btn_primary modal-btn"
              type="submit"
              value={actionButtonText}
            />
          </ModalFooter>
        </form>
      </Modal>
    </div>
  );
};

export default function App() {
  return (
    <div className="App">
      <ModalComponent
        title="Hello"
        cancelButtonText="Cancel"
        actionButtonText="Submit"
        buttonText="testing"
      />
    </div>
  );
}

Here is the demo: https://codesandbox.io/s/fervent-bash-51lxe?file=/src/App.js:0-1826

Answer 2

Accepted answer doesn't work when Modal isscrollable .

Here is how to resolve the issue:

<Modal show={ show } onHide={ onClose }
    scrollable={ true }
    onSubmit={ handleSubmit(onSave) } 
    dialogAs={ FormWrappedModal }>
    <Modal.Header closeButton>
        <Modal.Title>some title</Modal.Title>
    </Modal.Header>
    <Modal.Body>some body</Modal.Body>
    <Modal.Footer>some body</Modal.Footer>
</Modal>

We need to introduce custom component FormWrappedModal for that purpose:

  const FormWrappedModal = ( props: any)=>{
      return (
          <form onSubmit={ props.onSubmit }>
             <Modal.Dialog { ...props } />
         </form>
     );
  };