Get, Set, and Default Values in a React-Bootstrap Form Control

The React-Bootstrap Form Control component has some useful props for getting and setting values. We can also add a default value with the default prop, or simply with a preset value in the value prop.

We will build the below Form Control wrapped in an Input, with the Button text being set by changes in the Form Control value. Also when the Button is pressed the Form Control value has a “+” appended.

Full code for this tutorial is in the Resources section.

React-Bootstrap Form Control Set Value

To set values from an outside source in a React-Bootstrap form control component, we need to set the form control value prop to a state value:

const [formValue, setFormValue] = React.useState("");

return (
<InputGroup className="mb-3">
  <Form.Control
    value={formValue}

  />
</InputGroup >
)

This simple code will allow the value of the form control to change based on an outside event like the click of this button:

<Button variant="primary" onClick={() => setFormValue(formValue + "+")}>Click Me!</Button>

However, this creates a problem for the form control. When a user types a value in it, the form control will not reflect this change. That’s because its value is set to the state val formValue and the state val is not changing.

We need to add a change handler to the form control that updates the state value on change of the form control value:

onChange={(event) => setFormValue(event?.target.value)}

Now the form control component can have its value updated by internal and external changes.

Here’s how to set width and height in the form control component.

React-Bootstrap Form Control Get Value

We can also get the value of a React-Bootstrap form control component by using a state value. See the example of the button below:

<Button variant="primary" onClick={() => setFormValue(formValue + "+")}>{formValue}</Button>

Now the button has its value set by the formValue state var. This value is essentially a getter for the form control value.

The form control is very customizable. Here’s a really cool notched border demo I made.

React-Bootstrap Form Control Default Value

If we want to use a default value in a React-Bootstrap form control, we need to be careful to use either the value prop with a state val or use the defaultValue prop with no value prop.

If we use both the defaultValue and value prop at the same time, we get this error:

Additionally, the defaultValue is being overridden by the value which may lead to confusion.

If we have are using the code in the previous section for getting and setting form control values, then we can set a default in the state value itself:

const [formValue, setFormValue] = React.useState("Some Default!");

This will immediately render the form control with the text “Some Default!”.

If we don’t have getter and setter requirements, then use the defaultValue prop:

<Form.Control
  defaultValue={"Some Default!"}
/>

Resources

You may want to style the form control border, hover, and focus.

I really like the MUI component library and highly recommend it. The TextField is their equivalent component to the React-Bootstrap Input and Form Control combo. Here’s how to get values, set values, and use default values in the MUI TextField.

Here is full code for this demo:

import React from "react";
import InputGroup from "react-bootstrap/InputGroup";
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';

import "./GetSetDefaultFormControl.scss";

export default function GetSetDefaultFormControl() {
  const [formValue, setFormValue] = React.useState("Some Default!");

  return (
    <div >
      <InputGroup className="mb-3">
        <Form.Control
          value={formValue}
          onChange={(event) => setFormValue(event?.target.value)}
          // defaultValue={"Some Default!"}
        />
      </InputGroup >
      <Button variant="primary" onClick={() => setFormValue(formValue + "+")}>{formValue}</Button>
    </div >
  )
}