How to display date on react-calendar using DateTime value from database

Question

I am very new to React and I found the react-calendar through searching and used it as a date picker for my app. When I save a new entity on my app, it saves the date from react-calendar to my database just fine. But when I am updating the entity on the front end, is there a way to show the datetime value on the react-calendar? I know the format is wrong so it is throwing an error. How do I format it properly for react-calendar to accept the datetime/date value and possibly display it visually on the date picker?

This is what my console logs are showing currently:

 export function PatientForm(props) { const [PatientId, setPatientId] = useState(props.patient.patientId); const [FirstName, setFirstName] = useState(props.patient.firstName); const [LastName, setLastName] = useState(props.patient.lastName); const dateReceived = props.patient.dateOfBirth; const formattedDateOfBirth = moment(dateReceived).format('MMMM Do YYYY'); console.log('Got the datetime properly: ' + props.patient.dateOfBirth); console.log('date received: ' + dateReceived); console.log('formatted DOB: ' + formattedDateOfBirth); const [DateOfBirth, setDateOfBirth] = useState(formattedDateOfBirth); const [Gender, setGender] = useState(props.patient.gender); const [DoctorId, setDoctorId] = useState(props.patient.doctorId); const handleSubmit = (e) => { e.preventDefault(); props.submit({ PatientId, FirstName, LastName, DateOfBirth, Gender, DoctorId }); }

 export function UpdatePatient(props) { const { patientId } = useParams(); const [patient, setPatient] = useState(); const navigate = useNavigate(); useEffect(() => { fetch('patient/edit/' + patientId).then(res => res.json()).then(p => setPatient(p)); }, []); const handleSubmit = (patient) => { fetch('patient/update', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(patient) } ); navigate('/listpatients'); } //FIX ME: NOT RENDERING REACT-CALENDAR PROPERLY return ( patient? <PatientForm patient={patient} submit={handleSubmit} />: <div>...loading</div> ); }

Answer 1

SOLVED

I had to pass the props to a new Date like this and also declare separate variable for DateOfBirth:

const [value, setValue] = useState(new Date(props.patient.dateOfBirth));
const [DateOfBirth, setDateOfBirth] = useState(props.patient.dateOfBirth);

Then inside the Calendar tag, I had to use the keyword from reac-calendar "defaultValue" then pass in the value previously declared.

 <Calendar calendarType="US" defaultValue={value} onChange={onChange} />

I also created a helper function to do something inside onChange basing this on react-calendar's documentation :

function onChange(DateOfBirth) {
    setDateOfBirth(DateOfBirth);
}

See my sandbox here: Solution