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.

CodePudding user response：

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.