reactjsmongodbexpressdatepickermern
Date Picker not working, connect date picker value to my mongodb, MERN Project
I am facing issue in my project, when I pick date from the datepicker calendar there is an error generated, i actually wanted to save my data with an extra input as date, for this purpose I use date picker from mui (material Ui), but I am unable to find any solution or not able to solve this error. I will show some parts of my code to show what I am facing and what I wanted to be solve.
Date Picker Field Image
this is the Image of the date picker Calender, when I click any of the number from it, it give me an error, also when I edit the in the field error generated.
Error when I click on any number
There line of error generated are shown below, which I am not understand why it is.
TypeError: Cannot read properties of undefined (reading 'value')
(anonymous function)
C:/Users/Awais Bin Riaz/Desktop/React/Web-Development-Class/table-react/web/src/components/client/index.jsx:182
179 | onChange={(e) => {
180 | setPlanData((prev) => {
181 | return {
> 182 | ...prev, planDate: e.target.value };
| ^ 183 | });
184 | }
185 | }
View compiled
basicStateReducer
C:/Users/Awais Bin Riaz/Desktop/React/Web-Development-Class/table-react/web/node_modules/react-dom/cjs/react-dom.development.js:15195
15192 |
15193 | function basicStateReducer(state, action) {
15194 | // $FlowFixMe: Flow doesn't like mixed types
> 15195 | return typeof action === 'function' ? action(state) : action;
15196 | }
15197 |
15198 | function mountReducer(reducer, initialArg, init) {
View compiled
updateReducer
C:/Users/Awais Bin Riaz/Desktop/React/Web-Development-Class/table-react/web/node_modules/react-dom/cjs/react-dom.development.js:15318
15315 | newState = update.eagerState;
15316 | } else {
15317 | var action = update.action;
> 15318 | newState = reducer(newState, action);
| ^ 15319 | }
15320 | }
15321 |
View compiled
updateState
C:/Users/Awais Bin Riaz/Desktop/React/Web-Development-Class/table-react/web/node_modules/react-dom/cjs/react-dom.development.js:15641
15638 | }
15639 |
15640 | function updateState(initialState) {
> 15641 | return updateReducer(basicStateReducer);
15642 | }
15643 |
15644 | function rerenderState(initialState) {
View compiled
useState
C:/Users/Awais Bin Riaz/Desktop/React/Web-Development-Class/table-react/web/node_modules/react-dom/cjs/react-dom.development.js:16442
16439 | ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnUpdateInDEV;
16440 |
16441 | try {
> 16442 | return updateState(initialState);
| ^ 16443 | } finally {
16444 | ReactCurrentDispatcher$1.current = prevDispatcher;
16445 | }
View compiled
useState
C:/Users/Awais Bin Riaz/Desktop/React/Web-Development-Class/table-react/web/node_modules/react/cjs/react.development.js:1508
1505 | }
1506 | function useState(initialState) {
1507 | var dispatcher = resolveDispatcher();
> 1508 | return dispatcher.useState(initialState);
1509 | }
1510 | function useReducer(reducer, initialArg, init) {
1511 | var dispatcher = resolveDispatcher();
View compiled
PlanningData
C:/Users/Awais Bin Riaz/Desktop/React/Web-Development-Class/table-react/web/src/components/client/index.jsx:80
77 | const [value, setValue] = React.useState(new Date());
78 |
79 |
> 80 | const [plandata, setPlanData] = useState({
| ^ 81 | finishcode: "",
82 | styleName: "",
83 | MON: "",
View compiled
renderWithHooks
C:/Users/Awais Bin Riaz/Desktop/React/Web-Development-Class/table-react/web/node_modules/react-dom/cjs/react-dom.development.js:14985
14982 | }
14983 | }
14984 |
> 14985 | var children = Component(props, secondArg); // Check if there was a render phase update
| ^ 14986 |
14987 | if (didScheduleRenderPhaseUpdateDuringThisPass) {
14988 | // Keep rendering in a loop for as long as render phase updates continue to
View compiled
updateFunctionComponent
C:/Users/Awais Bin Riaz/Desktop/React/Web-Development-Class/table-react/web/node_modules/react-dom/cjs/react-dom.development.js:17356
17353 | {
17354 | ReactCurrentOwner$1.current = workInProgress;
17355 | setIsRendering(true);
> 17356 | nextChildren = renderWithHooks(current, workInProgress, Component, nextProps, context, renderLanes);
| ^ 17357 |
17358 | if ( workInProgress.mode & StrictMode) {
17359 | disableLogs();
View compiled
beginWork
C:/Users/Awais Bin Riaz/Desktop/React/Web-Development-Class/table-react/web/node_modules/react-dom/cjs/react-dom.development.js:19063
19060 | var _Component = workInProgress.type;
19061 | var unresolvedProps = workInProgress.pendingProps;
19062 | var resolvedProps = workInProgress.elementType === _Component ? unresolvedProps : resolveDefaultProps(_Component, unresolvedProps);
> 19063 | return updateFunctionComponent(current, workInProgress, _Component, resolvedProps, renderLanes);
| ^ 19064 | }
19065 |
19066 | case ClassComponent:
View compiled
HTMLUnknownElement.callCallback
C:/Users/Awais Bin Riaz/Desktop/React/Web-Development-Class/table-react/web/node_modules/react-dom/cjs/react-dom.development.js:3945
3942 | function callCallback() {
3943 | didCall = true;
3944 | restoreAfterDispatch();
> 3945 | func.apply(context, funcArgs);
| ^ 3946 | didError = false;
3947 | } // Create a global error event handler. We use this to capture the value
3948 | // that was thrown. It's possible that this error handler will fire more
View compiled
invokeGuardedCallbackDev
C:/Users/Awais Bin Riaz/Desktop/React/Web-Development-Class/table-react/web/node_modules/react-dom/cjs/react-dom.development.js:3994
3991 | // errors, it will trigger our global error handler.
3992 |
3993 | evt.initEvent(evtType, false, false);
> 3994 | fakeNode.dispatchEvent(evt);
| ^ 3995 |
3996 | if (windowEventDescriptor) {
3997 | Object.defineProperty(window, 'event', windowEventDescriptor);
View compiled
invokeGuardedCallback
C:/Users/Awais Bin Riaz/Desktop/React/Web-Development-Class/table-react/web/node_modules/react-dom/cjs/react-dom.development.js:4056
4053 | function invokeGuardedCallback(name, func, context, a, b, c, d, e, f) {
4054 | hasError = false;
4055 | caughtError = null;
> 4056 | invokeGuardedCallbackImpl$1.apply(reporter, arguments);
4057 | }
4058 | /**
4059 | * Same as invokeGuardedCallback, but instead of returning an error, it stores
View compiled
beginWork$1
C:/Users/Awais Bin Riaz/Desktop/React/Web-Development-Class/table-react/web/node_modules/react-dom/cjs/react-dom.development.js:23964
23961 | } // Run beginWork again.
23962 |
23963 |
> 23964 | invokeGuardedCallback(null, beginWork, null, current, unitOfWork, lanes);
| ^ 23965 |
23966 | if (hasCaughtError()) {
23967 | var replayError = clearCaughtError(); // `invokeGuardedCallback` sometimes sets an expando `_suppressLogging`.
View compiled
performUnitOfWork
C:/Users/Awais Bin Riaz/Desktop/React/Web-Development-Class/table-react/web/node_modules/react-dom/cjs/react-dom.development.js:22776
22773 |
22774 | if ( (unitOfWork.mode & ProfileMode) !== NoMode) {
22775 | startProfilerTimer(unitOfWork);
> 22776 | next = beginWork$1(current, unitOfWork, subtreeRenderLanes);
| ^ 22777 | stopProfilerTimerIfRunningAndRecordDelta(unitOfWork, true);
22778 | } else {
22779 | next = beginWork$1(current, unitOfWork, subtreeRenderLanes);
View compiled
workLoopSync
C:/Users/Awais Bin Riaz/Desktop/React/Web-Development-Class/table-react/web/node_modules/react-dom/cjs/react-dom.development.js:22707
22704 | function workLoopSync() {
22705 | // Already timed out, so perform work without checking if we need to yield.
22706 | while (workInProgress !== null) {
> 22707 | performUnitOfWork(workInProgress);
22708 | }
22709 | }
22710 |
View compiled
renderRootSync
C:/Users/Awais Bin Riaz/Desktop/React/Web-Development-Class/table-react/web/node_modules/react-dom/cjs/react-dom.development.js:22670
22667 |
22668 | do {
22669 | try {
> 22670 | workLoopSync();
| ^ 22671 | break;
22672 | } catch (thrownValue) {
22673 | handleError(root, thrownValue);
View compiled
performSyncWorkOnRoot
C:/Users/Awais Bin Riaz/Desktop/React/Web-Development-Class/table-react/web/node_modules/react-dom/cjs/react-dom.development.js:22293
22290 | }
22291 | } else {
22292 | lanes = getNextLanes(root, NoLanes);
> 22293 | exitStatus = renderRootSync(root, lanes);
| ^ 22294 | }
22295 |
22296 | if (root.tag !== LegacyRoot && exitStatus === RootErrored) {
View compiled
(anonymous function)
C:/Users/Awais Bin Riaz/Desktop/React/Web-Development-Class/table-react/web/node_modules/react-dom/cjs/react-dom.development.js:11327
11324 | var callback = _queue[i];
11325 |
11326 | do {
> 11327 | callback = callback(_isSync2);
| ^ 11328 | } while (callback !== null);
11329 | }
11330 | });
View compiled
unstable_runWithPriority
C:/Users/Awais Bin Riaz/Desktop/React/Web-Development-Class/table-react/web/node_modules/scheduler/cjs/scheduler.development.js:468
465 | currentPriorityLevel = priorityLevel;
466 |
467 | try {
> 468 | return eventHandler();
| ^ 469 | } finally {
470 | currentPriorityLevel = previousPriorityLevel;
471 | }
View compiled
runWithPriority$1
C:/Users/Awais Bin Riaz/Desktop/React/Web-Development-Class/table-react/web/node_modules/react-dom/cjs/react-dom.development.js:11276
11273 |
11274 | function runWithPriority$1(reactPriorityLevel, fn) {
11275 | var priorityLevel = reactPriorityToSchedulerPriority(reactPriorityLevel);
> 11276 | return Scheduler_runWithPriority(priorityLevel, fn);
11277 | }
11278 | function scheduleCallback(reactPriorityLevel, callback, options) {
11279 | var priorityLevel = reactPriorityToSchedulerPriority(reactPriorityLevel);
View compiled
flushSyncCallbackQueueImpl
C:/Users/Awais Bin Riaz/Desktop/React/Web-Development-Class/table-react/web/node_modules/react-dom/cjs/react-dom.development.js:11322
11319 | try {
11320 | var _isSync2 = true;
11321 | var _queue = syncQueue;
> 11322 | runWithPriority$1(ImmediatePriority$1, function () {
| ^ 11323 | for (; i < _queue.length; i++) {
11324 | var callback = _queue[i];
11325 |
View compiled
flushSyncCallbackQueue
C:/Users/Awais Bin Riaz/Desktop/React/Web-Development-Class/table-react/web/node_modules/react-dom/cjs/react-dom.development.js:11309
11306 | Scheduler_cancelCallback(node);
11307 | }
11308 |
> 11309 | flushSyncCallbackQueueImpl();
11310 | }
11311 |
11312 | function flushSyncCallbackQueueImpl() {
View compiled
discreteUpdates$1
C:/Users/Awais Bin Riaz/Desktop/React/Web-Development-Class/table-react/web/node_modules/react-dom/cjs/react-dom.development.js:22420
22417 | if (executionContext === NoContext) {
22418 | // Flush the immediate callbacks that were scheduled during this batch
22419 | resetRenderTimer();
> 22420 | flushSyncCallbackQueue();
| ^ 22421 | }
22422 | }
22423 | }
View compiled
discreteUpdates
C:/Users/Awais Bin Riaz/Desktop/React/Web-Development-Class/table-react/web/node_modules/react-dom/cjs/react-dom.development.js:3756
3753 | isInsideEventHandler = true;
3754 |
3755 | try {
> 3756 | return discreteUpdatesImpl(fn, a, b, c, d);
| ^ 3757 | } finally {
3758 | isInsideEventHandler = prevIsInsideEventHandler;
3759 |
View compiled
dispatchDiscreteEvent
C:/Users/Awais Bin Riaz/Desktop/React/Web-Development-Class/table-react/web/node_modules/react-dom/cjs/react-dom.development.js:5889
5886 | flushDiscreteUpdatesIfNeeded(nativeEvent.timeStamp);
5887 | }
5888 |
> 5889 | discreteUpdates(dispatchEvent, domEventName, eventSystemFlags, container, nativeEvent);
5890 | }
5891 |
5892 | function dispatchUserBlockingUpdate(domEventName, eventSystemFlags, container, nativeEvent) {
View compiled
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error. Click the 'X' or hit ESC to dismiss this message.
Server code
here is my server code, here the data schema, api written.
import express from 'express'
import mongoose from "mongoose"
import cors from "cors"
import path from "path";
import { createServer } from "http";
import { Server } from "socket.io";
import {
stringToHash,
varifyHash
} from "bcrypt-inzi"
import jwt from 'jsonwebtoken';
import cookieParser from 'cookie-parser';
import postmark from "postmark"
const __dirname = path.resolve();
// making some environment setting
const SECRET = process.env.SECRET
const POSTMARK_KEY = process.env.POSTMARK_KEY
const PORT = process.env.PORT
const app = express()
let client = new postmark.ServerClient(POSTMARK_KEY);
// connect mongodb url
mongoose.connect('##############');
// making schema for planning data
const PlanData = mongoose.model("Planning Data", {
created: { type: Date, default: Date.now },
finishcode: String,
styleName: String,
MON: String,
division: String,
orderQuantity: String,
barcode: String,
customer: String,
orderStatus: String,
planQuantity: String,
planDate: String,
})
app.use(express.json())
app.use(cookieParser())
app.use(cors({
origin: true,
credentials: true
}))
app.use('/', express.static(path.join(__dirname, 'web/build')))
app.get("/", (req, res, next) => {
res.sendFile(path.join(__dirname, "./web/build/index.html"))
})
app.get("/api/v1/gellAllPlanData", (req, res) => {
PlanData.find({})
.sort({ _id: "desc" })
.exec(function (err, data) {
res.send(data);
});
});
app.get("/api/v1/plandata", (req, res) => {
PlanData.findOne({})
.sort({ _id: "desc" })
.exec(function (err, data) {
res.send(data);
});
});
app.post("/api/v1/plandata", (req, res) => {
PlanData.findOne({ finishcode: req.body.finishcode, MON: req.body.MON }, (err, data) => {
if (data) {
res.send('On this finishcode: MON already exist');
console.log(data)
} else {
const newPlanData = new PlanData({
finishcode: req.body.finishcode,
styleName: req.body.styleName,
MON: req.body.MON,
division: req.body.division,
orderQuantity: req.body.orderQuantity,
barcode: req.body.barcode,
customer: req.body.customer,
orderStatus: req.body.orderStatus,
planQuantity: req.body.planQuantity,
planDate: req.body.planDate,
});
newPlanData.save().then(() => {
console.log("Planning Data created");
io.emit("PLANDATA", {
finishcode: req.body.finishcode,
styleName: req.body.styleName,
MON: req.body.MON,
division: req.body.division,
orderQuantity: req.body.orderQuantity,
barcode: req.body.barcode,
customer: req.body.customer,
orderStatus: req.body.orderStatus,
planQuantity: req.body.planQuantity,
planDate: req.body.planDate,
});
res.send("Planning Data created");
});
}
});
});
app.put("/api/v1/plandata", (req, res) => {
PlanData.updateOne({
_id: req.body.id
}, {
finishcode: req.body.finishcode,
styleName: req.body.styleName,
MON: req.body.MON,
division: req.body.division,
orderQuantity: req.body.orderQuantity,
barcode: req.body.barcode,
customer: req.body.customer,
orderStatus: req.body.orderStatus,
planQuantity: req.body.planQuantity,
planDate: req.body.planDate,
}, (err, data) => {
res.send("Data Edited");
});
});
app.delete("/api/v1/plandata", (req, res) => {
Post.deleteOne({ _id: req.body.id}, (err, data) => {
res.send("Data deleted");
});
});
app.get("/**", (req, res, next) => {
res.sendFile(path.join(__dirname, "./web/build/index.html"))
})
const server = createServer(app);
const io = new Server(server, { cors: { origin: "", methods: "", } });
io.on("connection", (socket) => {
console.log("New client connected with id: ", socket.id);
socket.emit("topic 1", "some data")
socket.on("disconnect", (message) => {
console.log("Client disconnected with id: ", message);
});
});
server.listen(PORT, function () {
console.log("server is running on", PORT);
})
React ui Code
it is my React Js code which I use for my project
import * as React from 'react';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import Button from "@mui/material/Button";
import TextField from "@mui/material/TextField";
import { Container, InputLabel, MenuItem, Select } from "@mui/material";
import { styled } from '@mui/material/styles';
import FormControl from '@mui/material/FormControl';
import NativeSelect from '@mui/material/NativeSelect';
import InputBase from '@mui/material/InputBase';
import Box from '@mui/material/Box';
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import LocalizationProvider from '@mui/lab/LocalizationProvider';
import DatePicker from '@mui/lab/DatePicker';
import MobileDatePicker from '@mui/lab/MobileDatePicker';
import DesktopDatePicker from '@mui/lab/DesktopDatePicker';
import Stack from '@mui/material/Stack';
import axios from "axios";
import "./index.css";
import { orderStatus, divisions, customers, articles } from "./data";
import backgroundImage from "./../../img/loginbg.jpg";
import { useState, useEffect, useRef } from "react";
import { baseUrl } from "../../core";
import io from "socket.io-client";
function PlanningData() {
const BootstrapInput = styled(InputBase)(({ theme }) => ({
'label + &': {
marginTop: theme.spacing(3),
},
'& .MuiInputBase-input': {
borderRadius: 4,
position: 'relative',
backgroundColor: theme.palette.background.paper,
border: '1px solid #ced4da',
fontSize: 16,
padding: '10px 26px 10px 12px',
transition: theme.transitions.create(['border-color', 'box-shadow']),
// Use the system font instead of the default Roboto font.
fontFamily: [
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Roboto',
'"Helvetica Neue"',
'Arial',
'sans-serif',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
].join(','),
'&:focus': {
borderRadius: 4,
borderColor: '#80bdff',
boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)',
},
},
}));
const [allPlanData, setAllPlanData] = useState([]);
const [value, setValue] = React.useState(new Date());
const [plandata, setPlanData] = useState({
finishcode: "",
styleName: "",
MON: "",
division: "",
orderQuantity: "",
barcode: "",
customer: "",
orderStatus: "",
planQuantity: "",
planDate: "",
});
useEffect(() => {
axios.get(`${baseUrl}/api/v1/gellAllPlanData`).then((res) => {
console.log("gellAllPlanData: ", res.data);
setAllPlanData(res.data);
});
}, []);
useEffect(() => {
axios
.get(`${baseUrl}/api/v1/plandata`)
.then((res) => {
console.log("res +++: ", res.data);
setPlanData(res.data);
});
}, []);
const submit = (e) => {
e.preventDefault();
axios
.post(
`${baseUrl}/api/v1/plandata`,
{
finishcode: plandata.finishcode,
styleName: plandata.styleName,
MON: plandata.MON,
division: plandata.division,
orderQuantity: plandata.orderQuantity,
barcode: plandata.barcode,
customer: plandata.customer,
orderStatus: plandata.orderStatus,
planQuantity: plandata.planQuantity,
planDate: plandata.planDate,
}
)
.then((res) => {
console.log("res: ", res.data);
});
};
return (
<div>
<br />
<h1> Planning Data </h1>
<form onSubmit={submit}>
<FormControl sx={{ m: 2.5 }} variant="standard">
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DesktopDatePicker
label="For desktop"
value={plandata.planDate}
minDate={new Date('2017-01-01')}
onChange={(e) => {
setPlanData((prev) => {
return {
...prev, planDate: e.target.value };
});
}
}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>
</FormControl>
<Button
sx={{ m: 2.5 }}
style={{
display: "inline-block",
padding: "8px",
}}
type="submit"
size="medium"
variant="contained"
color="primary"
>
Add
</Button>
</form>
</div>
);
}
export default PlanningData;
Solution
Just looked at the documentation. It looks like the DatePicker does not contain the e.target.value and instead uses a function call to return value.
const handleChange = (newValue) => {
setPlanData((prev) => {
return {
...prev, planDate: newValue };
});
};
<DesktopDatePicker
label="For desktop"
value={plandata.planDate}
minDate={new Date('2017-01-01')}
onChange={handleChange}
renderInput={(params) => <TextField {...params} />}
/>
- Why, exactly, do we need React.forwardRef?
- Checkbox cannot change state when updated from onBlur event
- Why VS Code contains emphasized items but no error?
- How to update data that React Query has already fetched so that I do not have to refetch all the data?
- Getting dates from google analytics API
- Is there a way to validate and allow only https url's using .isUri i.e. without using Regex in JavaScript?
- Invalid options object. Dev Server has been initialized using an options object that does not match the API schema
- React form is hitting onChange but existing value is not changing
- Cannot find module 'react-dom/client' from 'node_modules/@testing-library/react/dist/pure.js'
- page not found - react/vite app not routing correctly on github pages
- Blank page when deploying a react app to github pages and vite
- Set element width based on a string that is not in the element
- Should I use ref or findDOMNode to get react root dom node of an element?
- Lodash debounce with React Input
- React-Redux: Should all component states be kept in Redux Store
- Running google analytics script on Remix.run
- How to redirect if the param is not present Next.JS
- Cannot render child object in React JS table
- What is the proper way to do global state?
- new NativeEventEmitter()` was called with a non-null argument without the required `addListener` method
- Infer a TypeScript type based on functional React component?
- mui cannot override size style to Rating component
- Module not found: Error: Can't resolve '@mui/material/Unstable_Grid2'
- How to add click action for push notification in React native
- How to make a material-ui Modal scrollable
- Data is not rendering from state in Reactjs
- How to 'refresh token' using RTK Query
- How to apply custom animation effect @keyframes in Material UI?
- Electron preload functions not recognized after browser refresh
- Webpack & Typescript image import