Show Material UI Select (Drop Down) conditionally based on option chosen

Question

Suppose we have the code :

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import InputLabel from "@material-ui/core/InputLabel";
import Input from "@material-ui/core/Input";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";

const useStyles = makeStyles(theme => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120
  }
}));

function SuperForm() {
  const classes = useStyles();

  return (
    <div>
      <div>
        <FormControl className={classes.formControl}>
          <InputLabel htmlFor="grouped-native-select">Choose Type</InputLabel>
          <Select
            native
            defaultValue=""
            input={<Input id="grouped-native-select" />}
          >
            <option value={1}>Week</option>
            <option value={2}>Plan</option>
          </Select>
        </FormControl>
        <FormControl className={classes.formControl}>
          <InputLabel htmlFor="grouped-select">Number</InputLabel>
          <Select defaultValue="" input={<Input id="grouped-select" />}>
            <MenuItem value="">
              <em>None</em>
            </MenuItem>
            <MenuItem value={1}>1</MenuItem>
            <MenuItem value={2}>2</MenuItem>
            <MenuItem value={3}>3</MenuItem>
            <MenuItem value={4}>4</MenuItem>
            <MenuItem value={5}>5</MenuItem>
            <MenuItem value={6}>6</MenuItem>
            <MenuItem value={7}>7</MenuItem>
            <MenuItem value={8}>8</MenuItem>
          </Select>
        </FormControl>
      </div>    
    </div>
  );
}

export default SuperForm;

How can we show the second FormControl of Number only when the user chooses Week in the first FormControl ?

When he chooses Plan I want to render nothing.

Thanks

Answer 1

Have a useState in your Component and default it's value to 1:

const [typeValue, setTypeValue] = React.useState("1");

And then when the user changes the select, handle it like this:

const handleChange = event => {
  setTypeValue(event.target.value);
};

Finally, have a ternary in your return of the Component:

{typeValue === "1" ? (
  <FormControl className={classes.formControl}>
    <InputLabel htmlFor="grouped-select">Number</InputLabel>
    <Select defaultValue="" input={<Input id="grouped-select" />}>
      <MenuItem value="">
        <em>None</em>
      </MenuItem>
      <MenuItem value={1}>1</MenuItem>
      <MenuItem value={2}>2</MenuItem>
      <MenuItem value={3}>3</MenuItem>
      <MenuItem value={4}>4</MenuItem>
      <MenuItem value={5}>5</MenuItem>
      <MenuItem value={6}>6</MenuItem>
      <MenuItem value={7}>7</MenuItem>
      <MenuItem value={8}>8</MenuItem>
    </Select>
  </FormControl>
) : null}

---

Here's a Working Sample Demo for your ref.