React MUI: Value selection issue and missing default value
I'm creating a form in react using mui and formik. While using select I set default value using object from api but select is not working properly. I cannot select a value and the default value is not selected by default. Here is the code:
import { Box, Button, FormControl, InputLabel, Select, TextField } from "@mui/material";
import React, { useEffect, useState } from "react";
import { useLocation, useParams } from "react-router-dom";
import { Formik } from "formik";
import * as yup from "yup";
import useMediaQuery from "@mui/material/useMediaQuery";
import Header from "../../components/Header";
import useAuth from "../../hooks/useAuth";
import axios from "axios";
import { MenuItem } from "react-pro-sidebar";
const EditEmployee = () => {
const { user_id } = useParams(); // employee id
const [emp, setEmployee] = useState({});
const [Companies, setCompanies] = useState([]);
const [defcompany, setDefcompany] = useState("");
const [CompanyId, setCompanyId] = useState(null);
const handleChange = (event) => {
setDefcompany(event.target.value);
};
const { auth } = useAuth();
// get companies
const GetCompanies = () => {
axios.get(`${process.env.REACT_APP_MAIN_API_URL}/companies/`).then(function (res) {
try {
var result = res.data;
// console.log(result);
setCompanies(result);
} catch (error) {
console.log(error);
}
});
};
useEffect(() => {
GetCompanies();
}, []);
// get companies
useEffect(() => {
try {
const response = axios
.get(`${process.env.REACT_APP_MAIN_API_URL}/employees/` + user_id, {
headers: {
"Content-Type": "application/json",
// Authorization: "Bearer " + auth.accessToken
},
// withCredentials: true,
})
.then((response) => {
setEmployee(response.data[0]);
setCompanyId(emp.company_id);
console.log(response.data[0]);
});
} catch (err) {
console.log(err);
if (!err?.response) {
console.log("No server Response");
} else if (!err?.response?.status === 400) {
console.log("Missing username or password");
} else if (!err?.response?.status === 401) {
console.log("Unauthorized");
} else {
console.log("Login Failed");
}
}
}, []);
const phoneRegExp = /^((\+[1-9]{1,4}[ -]?)|(\([0-9]{2,3}\)[ -]?)|([0-9]{2,4})[ -]?)*?[0-9]{3,4}[ -]?[0-9]{3,4}$/;
const userSchema = yup.object().shape({
first_name: yup.string().required("required"),
last_name: yup.string().required("required"),
email: yup.string().email("Invalid email").required("required"),
contact_no: yup.string().matches(phoneRegExp, "Phone number is not valid").required("required"),
// address1: yup.string().required("required"),
// address2: yup.string().required("required"),
});
const isNonMobile = useMediaQuery("(min-width:600px)");
const handleFormSubmit = (values) => {
console.log("VALUES");
console.log(values);
};
return (
<Box m="20px">
<Header title="Editing" subtitle={`${emp.first_name} ${emp.last_name} ( ${emp.employee_id} )`}></Header>
<Formik enableReinitialize={true} onSubmit={handleFormSubmit} initialValues={emp} validationSchema={userSchema}>
{({ values, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting }) => (
<form onSubmit={handleSubmit}>
<Box
display="grid"
gap="30px"
gridTemplateColumns="repeat(4,minmax(0,1fr))"
sx={{
"& >div": { gridColumn: isNonMobile ? undefined : "span 4" },
}}
>
<TextField
fullWidth
variant="outlined"
type="text"
label="First Name"
InputLabelProps={{ shrink: true }}
onBlur={handleBlur}
onChange={handleChange}
value={values.first_name}
name="first_name"
error={!!touched.first_name && !!errors.first_name}
helperText={touched.first_name && errors.first_name}
sx={{ gridColumn: "span 1" }}
size="small"
/>
<TextField
fullWidth
variant="outlined"
type="text"
label="Last Name"
InputLabelProps={{ shrink: true }}
onBlur={handleBlur}
onChange={handleChange}
value={values.last_name}
name="last_name"
error={!!touched.last_name && !!errors.last_name}
helperText={touched.last_name && errors.last_name}
sx={{ gridColumn: "span 1" }}
size="small"
/>
<TextField
fullWidth
variant="outlined"
type="text"
label="Email"
InputLabelProps={{ shrink: true }}
onBlur={handleBlur}
onChange={handleChange}
value={values.email}
name="email"
error={!!touched.email && !!errors.email}
helperText={touched.email && errors.email}
sx={{ gridColumn: "span 1" }}
size="small"
/>
<TextField
fullWidth
variant="outlined"
type="text"
label="Phone"
InputLabelProps={{ shrink: true }}
onBlur={handleBlur}
onChange={handleChange}
value={values.contact_no}
name="contact_no"
error={!!touched.contact && !!errors.contact}
helperText={touched.contact && errors.contact}
sx={{ gridColumn: "span 1" }}
size="small"
/>
<TextField
fullWidth
variant="outlined"
type="text"
label="Username"
InputLabelProps={{ shrink: true }}
onBlur={handleBlur}
onChange={handleChange}
value={values.username}
name="username"
readOnly
error={!!touched.contact && !!errors.contact}
helperText={touched.contact && errors.contact}
sx={{ gridColumn: "span 1" }}
size="small"
/>
<FormControl fullWidth>
<InputLabel id="company_id">Company</InputLabel>
<Select
labelId="company_id"
// InputLabelProps={{ shrink: true }}
name="company_id"
fullWidth
id="demo-simple-select"
value={CompanyId || ""}
label="Company"
onChange={(e) => setCompanyId(e.target.value)}
size="small"
>
{Companies.map((company) => (
<MenuItem key={company.company_id} value={company.company_id}>
{company.name}
</MenuItem>
))}
</Select>
</FormControl>
<TextField
fullWidth
variant="outlined"
type="text"
label="Department"
InputLabelProps={{ shrink: true }}
onBlur={handleBlur}
onChange={handleChange}
value={emp.department_id}
name="department_id"
error={!!touched.contact && !!errors.contact}
helperText={touched.contact && errors.contact}
sx={{ gridColumn: "span 1" }}
size="small"
/>
<TextField
fullWidth
variant="outlined"
type="text"
label="Designation"
InputLabelProps={{ shrink: true }}
onBlur={handleBlur}
onChange={handleChange}
value={emp.designation_id}
name="designation_id"
error={!!touched.contact && !!errors.contact}
helperText={touched.contact && errors.contact}
sx={{ gridColumn: "span 1" }}
size="small"
/>
<TextField
fullWidth
variant="outlined"
type="text"
label="Address 1"
InputLabelProps={{ shrink: true }}
onBlur={handleBlur}
onChange={handleChange}
value={values.address1}
name="address1"
error={!!touched.address1 && !!errors.address1}
helperText={touched.address1 && errors.address1}
sx={{ gridColumn: "span 2" }}
size="small"
/>
<TextField
fullWidth
variant="outlined"
type="text"
label="Address 2"
InputLabelProps={{ shrink: true }}
onBlur={handleBlur}
onChange={handleChange}
value={values.address2}
name="address2"
error={!!touched.address2 && !!errors.address2}
helperText={touched.address2 && errors.address2}
sx={{ gridColumn: "span 2" }}
size="small"
/>
</Box>
<Box display="flex" justifyContent="end" mt="20px">
<Button type="submit" color="secondary" variant="contained">
Update
</Button>
</Box>
</form>
)}
</Formik>
</Box>
);
};
export default EditEmployee;
In addition, I think there are some problems with the chosen style.
