I am trying to build an form to edit data, and I cannot figure out how to show the date from database (mongoDB) in the date picker input field. I'm using a formik and a react datePicker in a CustomDatepicker component. Here is teh CustomDatePicker.jsx component:
import { useField } from "formik";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
const CustomDatePicker = ({ label, name = "" }) => {
const [field, meta, helpers] = useField(name);
const { value } = meta;
const { setValue } = helpers;
return (
<>
<label>{label}</label>
<DatePicker
{...field}
selected={value}
onChange={(date) => setValue(date)}
/>
</>
);
};
export default CustomDatePicker;
Here is the part of the form that calls the CustomDatePicker that calls the CustomDatePicker:
<Row>
<Col className="d-flex flex-column my-2">
<CustomDatePicker
label="Event End Date"
name="eventEndDate"
/>
</Col>
</Row>
Here is the entire EditReportModal.jsx form:
import { useEffect, useRef, useState } from "react";
import { Button, Modal, Row, Col } from "react-bootstrap";
import FormContainer from "./FormContainer";
import { Form, Formik } from "formik";
import { Tooltip } from "react-tooltip";
import Countries from "../countries-codes.json";
// icons
import { BsFillQuestionDiamondFill } from "react-icons/bs";
import {
useCreateReportMutation,
useGetReportByIdQuery,
} from "../slices/reportsApiSlice";
import { createReport } from "../schemas";
import moment from "moment";
import CustomRadio from "./inputs/CustomRadio";
import CustomSelect from "./inputs/CustomSelect";
import CustomInput from "./inputs/CustomInput";
import CustomDatePicker from "./inputs/CustomDatePicker";
import CustomTextarea from "./inputs/CustomTextarea";
import CustomCheckbox from "./inputs/CustomCheckbox";
import { toast } from "react-toastify";
import Loader from "./Loader";
const EditReportModal = ({ show, handleClose, editReportId, refetch }) => {
const { data: myReport, isLoading } = useGetReportByIdQuery(editReportId);
const [athlete, setAthlete] = useState("");
const [reportType, setReportType] = useState("");
const [matchType, setMatchType] = useState("");
const [eventName, setEventName] = useState("");
const [eventStartDate, setEventStartDate] = useState("");
useEffect(() => {
if (myReport) {
setReportType(myReport?.reportType);
setMatchType(myReport?.matchType);
setEventName(myReport?.eventName);
setEventStartDate(moment(myReport?.eventStartDate).format("M/D/YYYY"));
}
}, [myReport]);
const onSubmit = async (values, action) => {};
const windowSize = useRef([window.innerWidth, window.innerHeight]);
const tooltipWidth = windowSize.current[0] > 500 ? "50vw" : "90vw";
return (
<Modal size="xl" show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>Add Match</Modal.Title>
</Modal.Header>
<Modal.Body>
{isLoading && <Loader />}
<FormContainer>
<Formik
initialValues={{
athlete: "",
reportType: "",
matchType: "",
eventName: "",
eventStartDate: eventStartDate,
eventEndDate: "",
opponentName: "",
opponentClub: "",
opponentCountry: "",
opponentRank: "",
opponentHandedness: "",
opponentAttacks: "",
opponentAttackNotes: "",
athleteAttachs: "",
athleteAttackNotes: "",
result: "",
score: "",
isPublic: "",
}}
validateSchema={createReport}
onSubmit={onSubmit}
>
{({ isSubmitting }) => (
<Form>
<Row>
<Col className="d-flex flex-column my-2">
<label>
Report Type
<BsFillQuestionDiamondFill
data-tooltip-id="report-type-tooltip"
className="ms-2"
/>
<Tooltip
id="report-type-tooltip"
style={{
width: `${tooltipWidth}`,
zIndex: "9999",
}}
>
<div
style={{
display: "flex",
flexDirection: "column",
}}
>
Select Result if you only want to record match
results.
<br />
Select Scouting if you are scouting an athlete for
future matches
<br />
Select both if you want to record results and scout
the opponent for futuer matches.
</div>
</Tooltip>
</label>
<div className="d-flex flex-column align-items-start">
<CustomRadio
label="Result"
value="Result"
name="reportType"
placeholder="Result"
checked={myReport?.reportType === "Result"}
/>
<CustomRadio
label="Scouting"
value="Scouting"
name="reportType"
checked={myReport?.reportType === "Scouting"}
placeholder="Scouting"
/>
<CustomRadio
label="Both"
value="Both"
name="reportType"
placeholder="Both"
checked={myReport?.reportType === "Both"}
/>
</div>
</Col>
</Row>
<Row>
<Col className="d-flex flex-column my-2">
<CustomSelect
label="Match Type"
name="matchType"
placeholder="Select match type..."
value={matchType}
>
<option value="">Select event type...</option>
<option value="BJJ">Brazilian Jiu Jitsu</option>
<option value="Judo">Judo</option>
<option value="Wrestling">Wrestling</option>
</CustomSelect>
</Col>
</Row>
<Row>
<Col className="d-flex flex-column my-2">
<CustomInput
label="Event Name"
name="eventName"
type="text"
placeholder="Enter event name"
value={eventName}
/>
</Col>
</Row>
<Row>
<Col className="d-flex flex-column my-2">
<CustomDatePicker
label="Event Start Date"
name="eventStartDate"
/>
</Col>
<Col className="d-flex flex-column my-2">
<CustomDatePicker
label="Event End Date"
name="eventEndDate"
/>
</Col>
</Row>
<Row>
<Col className="d-flex flex-column my-2">
<CustomInput
label="Opponent Name"
name="opponentName"
type="text"
/>
</Col>
<Col className="d-flex flex-column my-2">
<CustomInput
label="Opponent Club"
name="opponentClub"
type="text"
/>
</Col>
</Row>
<Row>
<Col className="d-flex flex-column my-3">
<CustomInput
label="Opponent Rank"
name="opponentRank"
type="text"
/>
</Col>
<Col className="d-flex flex-column my-3">
<label>Primarily right or left handed</label>
<div className="d-flex flex-column align-items-start">
<CustomRadio
label="Righty"
value="righty"
name="opponentHandedness"
/>
<CustomRadio
label="Lefty"
value="lefty"
name="opponentHandedness"
/>
</div>
</Col>
</Row>
<Row>
<Col className="d-flex flex-column my-2">
<CustomSelect
label="Country"
name="opponentCountry"
placeholder="Select country..."
>
<option value="">Select country...</option>
<option value="USA">United States</option>
<option value="">----------</option>
{Countries.sort().map((country) => (
<option
key={country.iso3_code}
value={country.iso3_code}
>
{country.label_en}
</option>
))}
</CustomSelect>
</Col>
</Row>
<Row>
<Col className="d-flex flex-column my-3">
<CustomTextarea
label="Opponents attacks"
type="textarea"
name="opponentAttacks"
placeholder="Enter opponent's attacks"
/>
</Col>
</Row>
<Row>
<Col className="d-flex flex-column my-3">
<CustomTextarea
label="Notes on opponents attacks"
type="textarea"
name="opponentAttackNotes"
placeholder="Enter notes on opponent's attacks"
/>
</Col>
</Row>
<Row>
<Col className="d-flex flex-column my-3">
<CustomTextarea
label="My/My Athlete's attacks"
type="textarea"
name="athleteAttachs"
placeholder="Enter My/My Athlete's attacks"
/>
</Col>
</Row>
<Row>
<Col className="d-flex flex-column my-3">
<CustomTextarea
label="Notes on my/my athlete's attacks"
type="textarea"
name="athleteAttackNotes"
placeholder="Enter notes on opponent's attacks"
/>
</Col>
</Row>
<Row>
<Col className="d-flex flex-column my-3">
<label>Outcome</label>
<div className="d-flex flex-column align-items-start">
<CustomRadio label="Won" value="won" name="result" />
<CustomRadio label="Lost" value="Lost" name="result" />
</div>
</Col>
<Col className="d-flex flex-column my-3">
<CustomInput label="Score" name="score" type="text" />
</Col>
</Row>
<Row>
<Col className="d-flex flex-column my-3">
<CustomCheckbox
type="checkbox"
text="Make this report public"
name="isPublic"
tooltipText="Make this report public"
/>
</Col>
</Row>
<Row>
<Col className="d-flex flex-column align-items-center gap-2">
<Button
disabled={isSubmitting}
type="submit"
className="login_btn"
>
Add Report
</Button>
</Col>
</Row>
</Form>
)}
</Formik>
</FormContainer>
</Modal.Body>
</Modal>
);
};
export default EditReportModal;
I tried using momentjs to format the date inside the userEffect:
setEventStartDate(moment(myReport?.eventStartDate).format("M/D/YYYY"));
This is how it is formatted when you select a date from the popup calendar, but it's still empty.
I also tried:
setEventStartDate(moment(myReport?.eventStartDate).format("M-D-YYYY"));
That actually does show up in the form, but if I click inside the input field I get an error about time format being incorrect.
When I tried using moment inside the formik initial values I get this error:
Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.