When submitting a form in react the defined function to submit to in the parent component is not called

Question

I am at my wits end understanding why my submit is not working. I literally am using the same code base over and over and with all other parts of my code this was working fine. Now for the new code part, it simply does not work anymore. I try to simply submit some fields from a form and pass the values from the child component back to the parent component. This is my child component:

import React, { Component } from 'react';
import { Modal, Button, Form } from 'react-bootstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { icon } from '@fortawesome/fontawesome-svg-core/import.macro';
import '../../../components/Modal.css';

class Alert extends Component {

state = {
  type: 'price'
}

setType(type) {
  this.setState({
    type: type
  })
}

render() {

const { alert, handleClose, show, header } = this.props
const { type } = this.state
const showHideClassName = show ? "modal display-block" : "modal display-none";

return (
  <div className={showHideClassName}>
    <section className="modal-main">
      <Form onSubmit={alert}>
        <Modal.Dialog>
          <Modal.Header className="modalTitle">
            <Modal.Title>{ header }</Modal.Title><FontAwesomeIcon className="create-alert-icon" icon={icon({name: 'bell', style: 'solid' })} />
          </Modal.Header>
          <Modal.Body className="modalTitle" >
            <Form.Group>
              <label htmlFor="type">Type:</label>
              <Form.Control
                className="modalInput form-control form-control-sm"
                name="type"
                as="select"
                  value={type}
                  onChange={e => {
                    this.setType(e.target.value);
                  }}
                >
                <option value="price">Price</option>
                <option value="amount">Amount</option>
              </Form.Control>
            </Form.Group>
            {
              alertType === 'price' ?
              <span>
                <label className="modalTitle" htmlFor="price">Alert me based on price:</label>
                <Form.Control className="modalInput" name="amount" id="amount" size="sm" type="text" placeholder="1.22" />
              </span>
              : <span></span>
            }
            {
              alertType === 'amount' ?
              <span>
                <label className="modalTitle" htmlFor="amount">Alert me based on amount:</label>
                <Form.Control className="modalInput" name="amount" id="amount" size="sm" type="text" placeholder="300" />
              </span>
              : <span></span>
            }
          </Modal.Body>
          <Modal.Footer>
            <Button type="button" onClick={handleClose} variant="secondary">Close</Button>
            <Button type="submit" onClick={handleClose} variant="primary">Submit</Button>
          </Modal.Footer>
        </Modal.Dialog>
      </Form>
    </section>
  </div>
  )
 }
}

export default Alert;

This is my function in the parent component:

alert = (e) => {
  e.preventDefault()
  const { user } = this.props
  const { amount, type } = e.target
  const alert = { name: this.props.name, value: amount, type: type }
  console.log(alert);
  addAlert(alert);
}

This is my component in the parent that is being called and passes the props:

<CreateAlert show={ showCreateAlertModal } alert={this.alert} handleClose={ this.hideCreateAlertModal } header="Create a new Alert" />

When I submit using the Alert component, the modal is closed and nothing happens, nothing reaches the alert function, I have tried to move the component around in the parent, I have checked if the submit button is inside of the form (yes it is). I have tried to define the function one level above on another parent and pass the function through props two levels down to the child component, I have tried to remove content inside of the child component until there was just the submit button and the form left, and none of these things do any submit, the only thing that works is to define the button as submit directly which causes standard html5 submit to do its work, this works... so I am really at a loss why react is not able to use the same boilerplate once more to do the same action it did a couple of times before... I hope someone has an idea for me here, since I am getting mad at this, since everything looks fine...

Answer 1

The problem is that when you click the Submit button, it will call handleClose and close the modal, and then there will be no Submit button to submit. What you have to do is in your same alert function add the handleSubmit() function.

alert = (e) => {
  e.preventDefault()
  const { user } = this.props
  const { amount, type } = e.target
  const alert = { name: this.props.name, value: amount, type: type }
  console.log(alert);
  addAlert(alert);
  handleClose();
}

And leave the Submit button without any onClick handler, since the form itself will trigger the closing and the submitting logic.

Answer 2

I guess I found my issue.... it seems like it is not smart to put e.preventDefault() function inside of the handleClose() function which closes the modal... guess the handleClose function fired first preventing the submit from working properly:/