Creating a simple form with React Bootstrap

Step 1. Install react-bootstrap

Step 2. Import it in your component

For this exercise, we will nest a form inside a modal with a bootstrap button.

Step 3: Layout your basic form skeleton

For our form, we are specifying a cryptoasset to purchase a carbon offset for. First, we add a title to the modal using the Modal.Header tag. For our form, we will have two fields: a select dropdown and an input field. In bootstrap, the syntax for introducing a form element is Form.Group. It’s also required that you specify a controlId for each object. In the above code, we include some simple labels and a submit button too. Next we need to build out the forms a bit more.

Step 4: Flesh out form input fields

In React Bootstrap we refer to the form elements as Form.Control. For the first one, you indicate it will be a dropdown menu with the as=”select” and include the various options. The second component of the form is a vanilla input field where we specify type and name. Just like vanilla React forms, we introduce state in order to keep track of changes that need to be committed elsewhere (to a DB for instance). In this example, we initialize a state variable called offsetForm. In the handle functions, we leverage the setOffsetState function to keep track of user changes to the form.

The final step is to add a simple submit function for your form!

Sources: React Bootstrap Docs