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

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.

Answer 2

We can achieve this using state:
import React, { useState } 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 [selectedValue, setSelectedValue] = useState("");
const classes = useStyles();
return (
<div>
<div>
<FormControl className={classes.formControl}>
<InputLabel htmlFor="grouped-native-select">Choose Type</InputLabel>
<Select
native
value={selectedValue}
onChange={event => setSelectedValue(event.target.value)}
defaultValue=""
input={<Input id="grouped-native-select" />}
>
<option value={1}>Week</option>
<option value={2}>Plan</option>
</Select>
</FormControl>
{selectedValue === "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>
)}
</div>
</div>
);
}
export default SuperForm;