One of my tasks is to set a default value based on the previous selection in the Userlevel dropdown. The value will be determined by the Username selected, and I need to dynamically update the default value label accordingly. For example, if "dev_sams" is selected in the Username dropdown, then the maker should automatically be set to true. To better understand how the values and labels are updated, you can refer to the provided CodeSand Box link.
import React, { useMemo } from "react";
import {
Grid,
Card,
CardContent,
Button,
Box,
TextField,
MenuItem,
makeStyles
} from "@material-ui/core";
import { useFormik } from "formik";
const useStyles = makeStyles((theme) => ({
formGrid: {
padding: theme.spacing(2)
},
tableContainer: {
maxHeight: 440
}
}));
const userList = [
{
username: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5b3a3a39383f1b3e363a323775383436">[email protected]</a>",
maker: true,
checker1: false,
checker2: false,
checker3: false,
checker4: false,
checker5: false
},
{
username: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0c6d6d6e6f4c69616d6560226f6361">[email protected]</a>",
maker: true,
checker1: false,
checker2: false,
checker3: false,
checker4: false,
checker5: false
},
{
username: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5d3c3c3f3e2e2e391d38303c3431733e3230">[email protected]</a>",
maker: false,
checker1: true,
checker2: false,
checker3: false,
checker4: false,
checker5: false
},
{
username: "dev_sams",
maker: true,
checker1: false,
checker2: false,
checker3: false,
checker4: false,
checker5: false
},
];
export default function Downloads() {
const classes = useStyles();
const downloadsForm = useFormik({
initialValues: {
Username: "",
Userlevel: ""
},
// validationSchema: downloadFormSchema,
onSubmit: (values) => {
alert(JSON.stringify(values, null, 2));
}
});
const options = useMemo(() => {
if (userList) {
let levelList = [];
for (let [key, value] of Object.entries(userList)) {
if (value === true) {
levelList.push({ value: key, label: key });
}
}
return levelList;
}
}, [userList]);
React.useEffect(() => {
if (userList) {
downloadsForm.setFieldValue("baseStr", options[0]);
}
}, [options, userList]);
return (
<Grid>
<Grid item xs={12}>
<Card color="primary" variant="outlined">
<form onSubmit={downloadsForm.handleSubmit}>
<CardContent>
<Grid xs={12} item container>
<Grid item xs={6} className={classes.formGrid}>
<TextField
id="outlined-select-currency"
select
label="User"
fullWidth
onChange={downloadsForm.handleChange}
value={downloadsForm.values.Username}
name="Username"
error={downloadsForm.errors.Username}
helperText={downloadsForm.errors.Username}
variant="outlined"
size="small"
>
{userList?.map((opt) => (
<MenuItem key={opt.username} value={opt.username}>
{opt.username}
</MenuItem>
))}
</TextField>
</Grid>
{downloadsForm.values.Username && (
<Grid item xs={6} className={classes.formGrid}>
<TextField
id="outlined-select-currency"
select
label="Level"
fullWidth
onChange={downloadsForm.handleChange}
value={downloadsForm.values.Userlevel}
name="Userlevel"
variant="outlined"
size="small"
>
<MenuItem value={options}>{options}</MenuItem>
</TextField>
</Grid>
)}
</Grid>
<Grid xs={12} item className={classes.formGrid}>
<Box
display="flex"
alignItems="flex-end"
flexDirection="column"
>
<Button variant="contained" color="primary" type="submit">
Submit
</Button>
</Box>
</Grid>
</CardContent>
</form>
</Card>
</Grid>
</Grid>
);
}