Sometimes, we want to fix the can not submit form with react-bootstrap issue.

In this article, we’ll look at how to fix the can not submit form with react-bootstrap issue.

How to fix the can not submit form with react-bootstrap issue?

To fix the can not submit form with react-bootstrap issue, we should wrap the form element around the Bootstrap form components.

Then we set the onSubmit prop of the form element to a function that calls event.preventDefault to prevent the default server-side submission behavior.

For instance, we write:

import React from "react";
import { FormGroup, Button, FormControl } from "react-bootstrap";

export default function App() {
  const gotEmail = (event) => {
    event.preventDefault();
    console.log("got email");
  };

  return (
    <div>
      <form onSubmit={gotEmail}>
        <FormGroup role="form">
          <FormControl type="text" className="form-control" />
          <Button
            className="btn btn-primary btn-large centerButton"
            type="submit"
          >
            Send
          </Button>
        </FormGroup>
      </form>
    </div>
  );
}

We wrap the form element around the FormGroup element to create the form.

Then we set the onSubmit prop to the gotEmail function.

In gotEmail, we call event.preventDefault to prevent the default server-side form submission behavior.

As a result, when we click Send, we see 'got email' logged instead of submitting the form on server-side and reloading the page.

Conclusion

To fix the can not submit form with react-bootstrap issue, we should wrap the form element around the Bootstrap form components.

Then we set the onSubmit prop of the form element to a function that calls event.preventDefault to prevent the default server-side submission behavior.