What could be causing my Time Picker MUI to malfunction in my React project?

I am currently working on a React and Rails project where I am attempting to style my React components. However, I have encountered an issue with the MUI component Time and Date picker. Whenever I try to implement the time picker, I get a strange error regarding undefined properties.

EditReservationForm.js:106 Uncaught TypeError: Cannot read properties of undefined (reading 'value')

The error is occurring on line 106. It seems that the problem lies in the inability to detect the value. Can someone please take a look at my code below?

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';
...
... (rest of the code)
...

...
export default EditReservationForm;

``
It appears that when I use the normal form input for the time instead of the TimePicker component, everything works correctly. The error only occurs when using the TimePicker component. Is there another approach I could take to make this work? What could be causing this issue?

Answer №1

You should consider updating the following code snippet:

onChange={(e) => setUpdatedNum(e.target.value)}

to this instead:

onChange={(val) => setUpdatedNum(val)}

This change is necessary because, as explained in the TimePicker API documentation, the onChange function of TimePicker returns value directly, unlike TextField.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ensure consistency in CSS3 background color transitions

There are multiple elements on the webpage with background transitions that change from one color to another: @-moz-keyframes backgroundTransition /* Firefox */ { 0% {background-color:#ff7b7b;} 33% {background-color:#7fceff;} 66% {backgr ...

Error: The selected date range is invalid and cannot be displayed

My sanity is slipping away due to this persistent error. Despite trying every solution, nothing seems to resolve the issue. The problem lies with a material-ui Datepicker calendar that was working flawlessly until today. Strangely enough, I haven't ma ...

Whenever there is a material UI component that triggers an onchange event, it

Every time I attempt to modify the value in the autocomplete feature of material-ui, I consistently receive a value of 0. I have provided my entire code below, could someone please review it and assist me in resolving this issue? Any help would be greatl ...

Well, it appears that I am having trouble establishing a connection between the users in this chatting application

I'm encountering a problem with establishing a connection between two users. I have already installed express and socket.io, but for some reason, the message is not getting through to the receiver's end. The code seems to be running fine as I can ...

Can I use the mouseover event on an image to display a sibling div?

Hi everyone! I'm fairly new to web development and I could really use some advice. I'm trying to implement a mouseenter event on an img tag to show a sibling div, but I'm encountering some strange behavior. The mouseenter event seems to be w ...

What is the reason for the image not being positioned in the top left corner of the html page?

My simple HTML page consists of only one image: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Anz ...

CSS can always surprise with its unexpected animations

Currently developing a static website with CSS animations: * { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease- ...

React.js: The specified element type is not valid:

I am currently working on a sample project using react.js in Visual Studio 2019 Here is my Index.js file: import 'bootstrap/dist/css/bootstrap.css'; import React from 'react'; import ReactDOM from 'react-dom'; import { Provi ...

Having trouble getting Tailwind CSS to function in a Vite-React-Typescript project

I have written a code snippet that I plan to use for testing the installation of all required components before starting a new project: const App = () => { return ( <div className="min-h-screen flex justify-center items-center"> ...

Challenge encountered when converting React function component into a class component

I've developed a react functional component that aids in supporting authentication required routes with react-router. const PrivateRoute = ({ component: Component, ...rest }) => ( <Route {...rest} render={props => ( isAuthenticated() ? ...

Tips for adding a background color in mui useStyle:

I can't seem to figure out why the background color isn't showing up in this code. Any help would be greatly appreciated, thank you! import { makeStyles } from '@mui/styles'; const useStyles = makeStyles((theme) => ({ root: { h ...

Issues with div placement arise when incorporating relative positioning and floats

I have been attempting to position two divs with images next to the other divs but they appear underneath them instead. Can someone help me figure out what I am missing? FIDDLE CSS #main { margin: 0 auto; } #header { clear:both; float:left; ...

What is the best way to monitor different selections to keep track of their state?

In a certain scenario, a user is presented with three options: They can select the body_type of a car, the car_year it was manufactured, or the car_make. Initially, there is a state called carJson which contains a list of cars. "2": { " ...

Module not found error in Jest occurs exclusively during execution on Github Actions

I've encountered multiple failures in my GitHub actions recently. Everything was functioning correctly before, with no new or modified tests or changes to the footer component. The only alteration made was to the way the layout is being served. Intere ...

Simultaneously activate the top and bottom stacked components by clicking on them

One of my components has two child components, A and B. Component A is set to position: absolute and placed on top of component B like an overlay. Additionally, component A has a higher z-index. Both components have onClick events attached to them. My que ...

The content within a div block is having trouble aligning vertically

I need help with centering the content inside my fixed-top navigation bar vertically. I am using bootstrap to design my page, and the navigation bar consists of an image as the nav header and a container with links. The container surrounding these element ...

How can I arrange data to "toggle" when clicked?

Is it possible to toggle or onClick a data sorting function from A to Z and Z to A without creating multiple methods? I already have some sorting functions in place, but I'm looking for a way to make it a toggle. I can create another function to ach ...

What causes my CSS to be disrupted by a line break in one instance but not in another? (view demonstrations)

https://i.stack.imgur.com/bitod.png In comparing this particular fiddle with another version of the same fiddle, the only variance is that in the second one, there is </label><label for="address_zip" class="zip"> without a line break following ...

What is the best way to create dynamic cards like the ones displayed here?

I am experiencing an issue with the black box displaying the date. I created it, but it does not adjust properly to different screen sizes. .date { width: 20%; height: 15%; background-color: black; z-index: 1; position: absolute; top: 45%; ...

The CSS file is not displaying the background image on the PHP file

I am facing an issue with using CSS to include a background image for the layer, but it doesn't seem to be working correctly... The CSS code snippet is as follows: header { background-image: url("boisko.jpg"); background-repeat: no-repeat; background ...