Text inputs and select inputs

Text fields allow our users to enter text, while selects allow them to choose from a number of options. The difference between selects and radio buttons is that selects require less space on the screen since the options are only displayed when the user opens the option menu. Let's take a look at a Select component now:

import React, { useState } from "react";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";

export default function MySelect() {
  const [value, setValue] = useState("first");

  return (
    <FormControl>
      <InputLabel htmlFor="my-select">My Select</InputLabel>
      <Select
        value={value}
        onChange={e => setValue(e.target.value)}
        inputProps={{ id: "my-select" }}
 ...