this code is in mui..when we set on change event to this code .the input fields are not working. if we remve it ...it works..i cant resolve this problem.
What I have tried:
import React, { useState, useEffect } from "react";
import {
Box,
TextField,
InputLabel,
MenuItem,
Select,
Radio,
RadioGroup,
FormControlLabel,
FormControl,
FormLabel,
Button,
Stack,
styled,
Grid,
} from "@mui/material";
import { spacing } from "@mui/system";
const NewForm = () => {
const userobj = {
id: 0,
firstName: "",
email: "",
mobile: "",
city: "",
gender: "male",
department: "",
hireDate: new Date(),
isPermanent: false,
};
const [values, setValues] = React.useState(userobj);
const StyledBox = styled(Box)({
display: "flex",
});
const handleChange = (event) => {
const { name, value } = e.target;
setValues({ ...values, [name]: value });
};
return (
<div>
<StyledBox>
<form>
<Grid container>
<Grid item sx={6}>
<Box
component="form"
sx={{
"& > :not(style)": { m: 1, width: "80%" },
}}
>
<TextField
varient="outlined"
label="Full Name"
value={values.fullName}
name="fullname"
onChange={handleChange}
/>
<TextField
varient="outlined"
label="Email"
values={values.email}
name="email"
onChange={handleChange}
/>
</Box>
</Grid>
<Grid item sx={6}></Grid>
</Grid>
</form>
</StyledBox>
</div>
);
};
export default NewForm;