Unable to submit form in Model react

Question

I have a model file in which I want to submit form but I am not able to trigger submit function my file is like

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

function ArticleOptionsModal(props) {
  const [articleOption, setArticleOption] = useState("");
  useEffect(() => {
    if (typeof props.articleopt === "undefined") {
      setArticleOption("");
      console.log("hhiii");
    } else {
      setArticleOption(props.articleopt.optionname);
      console.log("hhiii");
    }
  }, [props]);

  return (
    <form onSubmit={e => handleSubmit(e)}>
    <Modal isOpen={props.modal} toggle={props.toggle}>
      <ModalHeader toggle={props.toggle}>Times</ModalHeader>
      <ModalBody>
            <div className='row'>
              <div className='col-sm-6'>
                <div className='form-group text-left'>
                  <label htmlFor='' className='small'>
                    Name
                  </label>
                  <InputField
                    name='username'
                    placeholder={"Enter Name"}
                    value={articleOption.optionname}
                    onChange={e => changeOptionName(e)}
                  />            
               </div>
            </div>
        )}
      </ModalBody>
      <ModalFooter>
        <Button
          name={"Submit"}
          type='submit'
          btnLongWidth={false}
          onClick={props.toggle}
        />
        <Button
          name={"Cancel"}
          dangerButton={true}
          btnLongWidth={false}
          onClick={props.toggle}
        />
      </ModalFooter>
    </Modal>
  </form>
  );
  function changeOptionName(e) {
    setArticleOption(e.target.value);
  }
  function handleSubmit(e) {
    console.log("hiiiiii");
  }
}

export default ArticleOptionsModal;

Here handleSubmit is not triggering when I try to submit form. I tried using diff methods to just trigger this submit method but till now no luck . Any kind of help would be highly appreciated.

Do you call `handleSubmit` anywhere? onSubmit you only call `changeOptionName` — user148397, Nov 02 '19 at 19:46
@user148397 sorry code updated . I was just testing if any other function is triggering or not — gamer, Nov 02 '19 at 19:48
I also suggest using a form library like Formik or Final-Form for your form management. This makes handling submits easier. — user148397, Nov 02 '19 at 19:48
Ok, next thing I would try to move the form tag inside the Modal component. Maybe the event gets lost because the modal component. — user148397, Nov 02 '19 at 19:51
@user148397 thank you very much. by moving model tag to inside Model it worked. and for future reference can you kindly send me Formik or Final-Form usage link ? — gamer, Nov 02 '19 at 19:58

score 2 · Accepted Answer · answered Nov 02 '19 at 20:01

2

The form tag needs to be inside the modal component as otherwise, the event doesn´t bubble up correctly.

As commented, I would suggest using a form library to handle the form management.

Personally I suggest Final Form: https://github.com/final-form/react-final-form

answered Nov 02 '19 at 20:01

user148397

180
6

thanks for help. kindly upvote my question if possible . – gamer Nov 02 '19 at 20:03

Unable to submit form in Model react

1 Answers1