React Form onSubmit not firing within functional component

Question

I have a form within a functional component called Payment. However when submitting the form by clicking the button the handler handleSubmitPayment(e) doesn't get called. Nor is there any error message in the console.

function Payment() {

  function handleSubmitPayment(e) {
    console.log("Form Submitted");
    console.log(e);
  }


  return (
  ...
  <form onSubmit={(e) => {console.log(e); handleSubmitPayment(e); /*e.preventDefault();*/}}>
  <Row>
      <Col>
        <span className="payment_form_text">CC Number</span>
        <input id="ccnumb" value=""/>
      </Col>
  </Row>
  <Row>
      <Col xs={6}>
       <span className="payment_form_text">CC Exp</span>
       <input id="ccexp" value=""/>
      </Col>
      <Col xs={6}>
          <span className="payment_form_text">CVV</span>
          <input id="cvv" value=""/>
      </Col>
  </Row>
     <Button variant="success" id="payButton" type="submit" style={{ marginTop: 50 }}>
       Pay
     </Button>
 </form>
...
)
}

export default Payment;

Please note these are dummy fields and I am not using a basic form to send raw payment data.

What could be a possible reason for this? Or what code changes do I need to deploy to make this work?

I can answer any more questions or provide more details if needed!

Answer 1

I may be misinterpreting what you're asking for here but I believe this is what you want? All I did was add e.preventDefault() to the handleSubmitPayment function and then in onSubmit I called

<form onSubmit={(e) => handleSubmitPayment(e)}>