<select> and <option> elements are extremely useful for collecting user inputs. As a web developer, you can use <select> to define a fixed set of options and limit user input to those options.

In some cases, you want to set a generic option as a default. Maybe it is the choice 90% of the time. The most common choice can be set as a default value for the <select> element. If users want, they can make another choice. If not, default value will be submitted.

Sometimes webmasters set a default value to instructions for choosing values.

Set default value for <select> elements in React

In this article, we will explain how to set a default value for <select> elements in React.

To set a default value for <select> elements in React, use the defaultValue prop to the same name as value attribute of one of the options.

<select> and <option> elements go hand in hand.

Let’s look at an example:

import "./styles.css";
import { useState } from "react";
export default function Select() {
  const [selectedAnimal, setSelectedAnimal] = useState();
  return (
    <div>
      <select
        value={selectedAnimal}
        defaultValue={"default"}
        onChange={(e) => setSelectedAnimal(e.target.value)}
      >
        <option value={"default"} disabled>
          Choose an animal
        </option>
        <option value={"Dog"}>Dog</option>
        <option value={"Piggy"}>Piggy</option>
        <option value={"Turkey"}>Turkey</option>
      </select>
      <h1>You selected {selectedAnimal}</h1>
    </div>
  );
}

There’s a lot to dissect here. We have a <select> element where users choose an animal.

In this case, the default value is set to instructions for choosing a value (‘Choose an animal’). As you can see, the defaultValue attribute of the <select> element is set to the value of one of the <option> elements.

Users should not be able to choose this default value. It’s not a valid option, only instructions. So we add the disabled prop to the <option> chosen as the default.

Check out live example on CodeSandbox.

State values and change the value of <select>

React recommends to store user’s inputs in the state. Input elements (like <select>) that store their values in the state are called controlled components.

We use the useState() hook, which returns two values – the state variable and the function to update it.

We use the onChange attribute to specify an event handler. The function will be executed every time users choose one of the options. The selectedAnimal state variable will be set to an argument to the setSelectedAnimal() function, which is the value attribute of user’s selected <option>. selectedAnimal is the state variable that stores user’s current choice.

react-select

react-select provides a custom <select> component with rich functionality. It supports various useful features like autocomplete and multiselect.

When using react-select, you only need to provide a list of options. You don’t need to create many <options> elements.

Every item in the options array represents an individual <option> element. Options are formatted as objects with two properties: labeland value. Values of these properties represent each option’s label and value. Label is the value between opening and closing <option> tags. Value is the value of <option> element’s value prop.

You don’t need to define onChange event handler for react-select custom component. It takes care of everything for you.

Set default value for react-select component

To start, import custom Select component from react-select.

To specify a default value for custom react-select component, you need to set the defaultValue prop to a JavaScript object. Let’s look at the code example:

import "./styles.css";
import Select from "react-select";
export default function App() {
  let options = [
    { label: "Dog", value: "dog" },
    { label: "Piggy", value: "piggy" },
    { label: "Turkey", value: "turkey" }
  ];
  return (
    <div className="App" style={{ width: 200 }}>
      <Select
        options={options}
        defaultValue={{ label: "Choose an animal", value: "placeholder" }}
      ></Select>
    </div>
  );
}

The value of defaultValue prop is set to one object, because there can be only one default option. The object has two properties – label and value, which represent the label and value of the default option, respectively.

It’s much easier to set a default value for react-select component. It also provides a better experience. Check out live demo. As you can see, when user expands the list of options, the default value is not there.

React, UI Libraries