Display selected Day from the Calendar

[Leon910]

Hi everyone,

I’m currently working on a US where I have a calendar day popup window that allows the user to get directed to the homepage and create a new emotion entry for that date. When the user clicks the "Create Emotion" button, it redirects to the home page, automatically opening the form where the selected date should be prefilled in the date and time input field.

The issue is: The selected date is only displayed in the form after I reload the page.

Here’s what I’ve implemented and tried so far:

• I pass the selected date as a query parameter (selectedDate) when redirecting to the form page.
• I use our already implemented useEffect to extract selectedDate from router.query and update a selectedDate state in the form component.
• I initialize the selectedDate state

feature/calendar-popup

US - calendar popup

Any help or suggestions would be greatly appreciated!

[onemanwenttomow]

I would consider checking if the selectedDate is in the query string when you initialise the component.

i.e. something like this (if it doesn't exist on the query string then use the current date).

const [selectedDate, setSelectedDate] = useState(() => {
  const currentDate = format(new Date(), "yyyy-MM-dd");
  return router.query.selectedDate || currentDate;
});

Hopefully this helps

[Leon910]

It works👌🏻🙌 Thanks a lot Peter - @onemanwenttomow !!!