I developed a React frontend application styled with Material UI design. The issue I am facing is that after adding the Date and Time component styling to the form, it is unable to process the "name" value for posting. Specifically, the error message "TypeError: Cannot read properties of undefined (reading 'name')" appears only in the Date and time input fields. Can someone please review my code? Thank you.
function ReservationForm(){
const navigate = useNavigate();
const params = useParams();
const {user}=useContext(Cont)
const[reservationData,setReservationData]=useState({
name:"",
date:"",
time:"",
num:"",
contact:"",
occasion:"",
});
function handleReservationChange(event){
setReservationData({
...reservationData,
[event.target.name]: event.target.value,
})
}
function handleReservationSubmit(event){
event.preventDefault();
const newReservation={
...reservationData,
restaurant_id: params.id,
user_id: user.id,
};
fetch(`/reservations`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(newReservation),
})
.then((r) => r.json())
.then(
setReservationData({
name:"",
date:"",
time:"",
num:"",
contact:"",
occasion:"",
})
);
navigate("/myreservations");
}
return(
<>
<Box
component="form"
sx={{
"& > :not(style)": { m: 1 },
}}
noValidate
autoComplete="off"
onSubmit={handleReservationSubmit}
>
<h1 className="editheadings">Reserve 🍽️</h1>
<FormControl className="inputstyle">
<InputLabel htmlFor="component-outlined">Name</InputLabel>
<OutlinedInput
type="text"
name="name"
id="name"
value={reservationData.name}
onChange={handleReservationChange}
label="Name"
/>
</FormControl>
<br />
<FormControl>
<LocalizationProvider name="date" dateAdapter={AdapterDayjs} fullWidth>
<DatePicker
name="date"
label="Date"
value={reservationData.date}
onChange={handleReservationChange}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>
</FormControl>
<FormControl>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<TimePicker
name="time" label="Time"
value={reservationData.time} onChange={handleReservationChange}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>
</FormControl>
<br />
<FormControl className="inputstyle">
<InputLabel htmlFor="component-outlined">No. of Guests</InputLabel>
<OutlinedInput
type="number"
name="num"
value={reservationData.num} onChange={handleReservationChange}
/>
</FormControl>
<br />
<FormControl className="inputstyle">
<InputLabel htmlFor="component-outlined">Contact</InputLabel>
<OutlinedInput
type="tel"
name="contact"
value={reservationData.contact} onChange={handleReservationChange}
placeholder="contact"
/>
</FormControl>
<br />
<FormControl className="inputstyle">
<InputLabel htmlFor="component-outlined">Occasion</InputLabel>
<OutlinedInput
type="text"
name="occasion"
value={reservationData.occasion} onChange={handleReservationChange}
/>
</FormControl>
<Stack paddingLeft={15} direction="row" id="loginbutton">
<ColorButton variant="contained" type="submit">
Update Reservation
</ColorButton>
</Stack>
</Box>
</>
)
}
export default ReservationForm;