Hello i have a react and rails project .Im trying to style my react project.Im stuck with the MUI component Time and Date picker whenever I try implementing the time pickerI get a weird error.I want to somehow style it and use the update request to update the stuff.
EditReservationForm.js:106 Uncaught TypeError: Cannot read properties of undefined (reading 'value')
This is the error occuring in line 106.I think the problem is it cannot detect the value Pls take a look at my code.
import { useState } from "react";
import "./stylingfolder/EditReservation.css";
import Box from "@mui/material/Box";
import FormControl from "@mui/material/FormControl";
import InputLabel from "@mui/material/InputLabel";
import OutlinedInput from "@mui/material/OutlinedInput";
import Button from "@mui/material/Button";
import Stack from "@mui/material/Stack";
import { styled } from "@mui/material/styles";
import { purple } from "@mui/material/colors";
import * as React from 'react';
import TextField from '@mui/material/TextField';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { TimePicker } from '@mui/x-date-pickers/TimePicker';
const ColorButton = styled(Button)(({ theme }) => ({
color: theme.palette.getContrastText(purple[500]),
backgroundColor: purple[500],
"&:hover": {
backgroundColor: purple[700],
},
}));
function EditReservationForm({ reservation, onUpdateReservation }) {
const { name, date, time, num, contact, occasion } = reservation;
const [updateName, setUpdatedName] = useState(name);
const [updateDate, setUpdatedDate] = useState(date);
const [updateTime, setUpdatedTime] = useState(time);
const [updateNum, setUpdatedNum] = useState(num);
const [updateContact, setUpdatedContact] = useState(contact);
const [updateOccasion, setUpdatedOccasion] = useState(occasion);
function handleEditClick(e) {
e.preventDefault();
fetch(`/reservations/${reservation.id}`, {
method: "PATCH",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
name: updateName,
date: updateDate,
time: updateTime,
num: updateNum,
contact: updateContact,
occasion: updateOccasion,
}),
})
.then((r) => r.json())
.then((updatedReservation) => {
onUpdateReservation(updatedReservation);
});
}
return (
<>
<Box
component="form"
sx={{
"& > :not(style)": { m: 1 },
}}
noValidate
autoComplete="off"
onSubmit={handleEditClick}
>
<h2>Modify Reservation</h2>
{/* <form onSubmit={handleEditClick} > */}
<FormControl>
<InputLabel htmlFor="component-outlined">Name</InputLabel>
<OutlinedInput
type="text"
// id="email"
id="email"
value={updateName}
onChange={(e) => setUpdatedName(e.target.value)}
label="Name"
/>
</FormControl>
<br />
<FormControl>
<InputLabel htmlFor="component-outlined">Date</InputLabel>
<OutlinedInput
type="date"
// id="email"
id="date"
value={updateDate}
onChange={(e) => setUpdatedDate(e.target.value)}
label="Date"
/>
</FormControl>
<br />
<FormControl>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<TimePicker
label="Basic example"
value={updateTime}
onChange={(e) => setUpdatedTime(e.target.value)}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>
{/* <InputLabel htmlFor="component-outlined">Time</InputLabel>
<OutlinedInput
type="time"
name="time"
id="time"
value={updateTime}
onChange={(e) => setUpdatedTime(e.target.value)}
/> */}
</FormControl>
<br />
<FormControl>
<InputLabel htmlFor="component-outlined">No. of Guests</InputLabel>
<OutlinedInput
type="number"
name="num"
value={updateNum}
onChange={(e) => setUpdatedNum(e.target.value)}
/>
</FormControl>
<br />
<FormControl>
<InputLabel htmlFor="component-outlined">Contact</InputLabel>
<OutlinedInput
type="tel"
name="contact"
value={updateContact}
onChange={(e) => setUpdatedContact(e.target.value)}
placeholder="contact"
/>
</FormControl>
<br />
<FormControl>
<InputLabel htmlFor="component-outlined">Occasion</InputLabel>
<OutlinedInput
type="text"
name="occasion"
value={updateOccasion}
onChange={(e) => setUpdatedOccasion(e.target.value)}
/>
</FormControl>
<Stack paddingLeft={15} direction="row" id="loginbutton">
<ColorButton variant="contained" type="submit">
{" "}
Update Reservation
</ColorButton>
</Stack>
{/* </form> */}
</Box>
</>
);
}
export default EditReservationForm;
``
Is there any other way this could work????or why is it not working?.When I remove the time picker and use the normal form input to put in the time it works properly .Error is caused only by this time picker.
You need to change
onChange={(e) => setUpdatedNum(e.target.value)}
to
onChange={(val) => setUpdatedNum(val)}
because according to the TimePicker API onChange
function returns value
instead of event
unlike TextField.