React Basics

React ES6

React Hooks

React Select

❮ Previous Next ❯

React Select

In traditional HTML, the <select> tag creates a functional drop-down list. In React, instead of having to place a selected attribute on individual nested <option> tags, you elegantly set the value attribute on the root <select> tag itself.

Select Dropdown

import { useState } from 'react';


function FlavorForm() {
  const [flavor, setFlavor] = useState("coconut");
  return (
    <select value={flavor} onChange={(e) => setFlavor(e.target.value)}>
      <option value="grapefruit">Grapefruit</option>
      <option value="coconut">Coconut</option>
    </select>
  );
}

❮ Previous Next ❯