#React#React-forms#forms

React Forms - Form Controls

Published on
•
4 mins read
•
––– views

Form Controls

If we need a lot of data from the user, it's a good idea to make them fill it in. Imagine a form to submit food order. Since we are really responsible people at the top of the form, we ask the user if they have peanut allergies. Using a checkbox would make sense here. If the box is checked, we will hide all the menu items that include peanuts.

Let's create a select tag

//first we need useState
const [optionSelected, setOptionSelected] = useState('January')
// `January` is used as the default value, it's displayed when the form is rendered.


<select
// value bind to useState hook
          value={optionSelected}
// setState will be triggered with the user
          onChange={event => {
            setOptionSelected(event.target.value)
          }}
        >
          <option value="January">
            January
          </option>
          <option value="February">
            February
          </option>
          <option value="March">
            March
          </option>
        </select>

value is set with useState hook with optionSelected and it let's React control the input. Selected option will change the state and React will manage it.

When the form first renders, the user will see January as selected. So, the current value of the optionSelected is January. If the user selects March, setOptionSelected will update the state and the user will see March as selected.

Radio Buttons

Radio buttons let the user select only one option. Rate your current happiness from 1 to 5, we will have 5 buttons and the user can pick only one.

So as the select tag I can hear you saying and that is correct. Select is useful if the default option is the most common. For example, for a food ordering app, we can assume most of our users will want immediate delivery. So, creating the delivery option with select tag and setting the default value to deliver now makes sense.

If we need to ask the user if they want fries with their order, using radio buttons can improve the user experience. We can display cost of fries next to Yes option.

Let's create our radio buttons.

const [value, setValue] = React.useState('no')

<form>
  <fieldset>
    <legend>Add fries to your order?</legend>
    <input
      type="radio"
      name="add-fries"
      id="fries-yes"
      value="yes"
      checked={value === "yes"}
      onChange={(event) => {
        setValue(event.target.value);
      }}
    />
    <label htmlFor="fries-yes">Yes +$1.5</label>
    <input
      type="radio"
      name="add-fries"
      id="fries-no"
      value="no"
      checked={value === "no"}
      onChange={(event) => {
        setValue(event.target.value);
      }}
    />{" "}
    <label htmlFor="fries-no">No</label>
  </fieldset>
</form>;

Let's break it down, that is too much code to return yes or no.

  • Name ➡️ to link buttons to each other, we need to use the name prop. Buttons that share the same name, will be linked to each other.

  • Value ➡️ Each of the radio buttons has its unique value that will be transferred to our React state when it's selected.

  • id ➡️ Similar to HTML forms, id is needed so the input is linked to the <label> tag.

  • Checked ➡️ Determines what it means when the box checked. By clicking on the it, we change the state of the input.

Here is a small snippet for onChange function:

onChange={(event) => {
        setValue(event.target.value);
      }}

When a user clicks the radio button1, it triggers the onChangefunction, which in turn generates anevent. We then update the stateof the component by calling thesetValuefunction, which is provided by theuseState() hook.

You may have noticed this

      value="no"
      checked={value === "no"}

Most of the time, we bind the state to the value. On this example, we didn't do that, because we have multiple radio buttons to pick from. We passed a string to the value and when the radio button is checked, we bind the value to the checked property (prop).

Discuss on Twitter