React onSubmit Button To POST Not Working

Question

I have a Modal component with a Form and Button in it. When the user clicks on the button, I want to populate a POST request (handled in a separate file) which runs a simulation from the validated values. If I use the onClick Button prop it prints "triggered" and the request to the console but not if I use onSubmit. This is the file:

import React, { useState, useEffect } from "react";
import { Button, Modal, FormFile, Form } from "react-bootstrap";
import * as ratingsApi from "../api/ratingsApi";
import PostBody from "../api/model/body.json";
import { loadRatings, saveRatings } from "../actions/Actions";
import ratingsStore from "../stores/ratingsStore";

export const RunSimsModal = props => {
  const [numberofSims, setNumberOfSims] = useState("");
  const [simName, setSimName] = useState("");

  const runSims = () => {
    console.log("triggered");
    ratingsApi.runSimulation(
      PostBody.clientId,
      simName,
      numberofSims,
      PostBody.initialValues,
      PostBody.initialOverrides,
      PostBody.initialId
    );
  };

  return (
    <Modal
      {...props}
      size="lg"
      aria-labelledby="contained-modal-title-vcenter"
      centered
    >
      <Modal.Header closeButton>
        <Modal.Title id="contained-modal-title-vcenter">
          Run Simulations
        </Modal.Title>
      </Modal.Header>

      <Modal.Body>
        <h4>Run Sims</h4>

        <Form>
          <Form.Group controlId="formBasicEmail">
            <Form.Label>Number Of Simulations</Form.Label>
            <Form.Control
              required
              type="text"
              placeholder="Enter number of sims"
              value={numberofSims}
              onChange={e => setNumberOfSims(e.target.value)}
            />
          </Form.Group>

          <Form.Group controlId="formBasicEmail">
            <Form.Label>Simulation Name</Form.Label>
            <Form.Control
              required
              type="text"
              placeholder="Enter simulation name"
              value={simName}
              onChange={e => setSimName(e.target.value)}
            />
          </Form.Group>

          <Form.Group controlId="formBasicEmail">
            <Form.Label>Tournament Type</Form.Label>
            <Form.Control as="select">
              <option>TYPE_OF_SIMULATION</option>
            </Form.Control>
          </Form.Group>

          <Form.Group controlId="formBasicEmail">
            <Form.Label>Settings</Form.Label>
            <FormFile.Input />
          </Form.Group>

          <Button type="submit" onSubmit={runSims}>Run</Button>
        </Form>
      </Modal.Body>
      <Modal.Footer>
        <Button onClick={props.onHide}>Close</Button>
      </Modal.Footer>
    </Modal>
  );
};

How do I modify <Button type="submit" onSubmit={runSims}> so that it sends the POST request after validating the values from the <Form>?

Answer 1

I guess onSubmit event should be added to <Form> component instead of the <Button>.

Based on the examples from Forms documentation on react-bootstrap:

<Form onSubmit={runSims}>
   { /* components */ }
</Form>

In the same time the <Button> component should have:

<Button type="submit">Run</Button>

Read further about other props in the API section below:
https://react-bootstrap.github.io/components/forms/#form-props

I hope this helps!