Pushing Rect-Datepicker date State to Another React Component - reactjs

Question

I am having a problem finding a way i can reliably store the state of the date from react-datepicker, and exporting that state to another component via URL parameter.
To give some context, I have two components. A Picker.JS component containing the react-datepicker calendar, and a separate Component called "DelayGuage", which dynamically draws a google charts guage using an API call. The only problem is, this API call has a dynamic parameter known as {date}, and this {date} parameter MUST come from the previously selected datepicker date.
Here is my DatePicker code Below. The issue I am having is that I keep getting
"Uncaught TypeError: event.target is undefined" when I attempt to call handleSubmit() after the calendar date is selected (onSelect).
import React, { useState } from "react";
import DatePicker from "react-datepicker";
import {Link, useNavigate} from "react-router-dom"
import "react-datepicker/dist/react-datepicker.css";
// CSS Modules, react-datepicker-cssmodules.css
// import 'react-datepicker/dist/react-datepicker-cssmodules.css';
const Picker = () => {
const navigate = useNavigate();
const [startDate, setStartDate] = useState(new Date());
const handleChange = (event) => {
setStartDate(event.target.value)
console.log(startDate)
}
const handleSubmit = (event) =>{
event.preventDefault();
navigate(`/guage/${startDate}`) //upon the call of handleSubmit, a redirect should call the guage component to be rendered, taking the startDate as a URL parameter
}
return (
<DatePicker selected={startDate} onChange={(date) => setStartDate(date)} onSelect={handleChange}/>
);
};
export default Picker
The second problem, is that I need to find a way to input the date selected from the Calendar with the API call to the backend to retrieve the data for my Guage. It only fetches a JSON for now, but the ability to fetch the appropriate JSON per date selected from the Picker.JS component has been giving me a headache.
Here is my DelayGuage.JS code below:
import React from "react";
import { Chart } from "react-google-charts";
import axios from "axios";
import { QueryClient, QueryClientProvider, useQuery } from 'react-query';
import { Link, useLocation, useParams } from "react-router-dom";
async function fetchPosts() {
const {data} = await axios.get(
"http://172.16.10.100:5004/reports/{date}/agencies"
);
const parsedData = data.agencies[0].kpis.map((r) => [
"Delay Index",
r.kpi_value * 100
]);
return [["Label", "Value"], ...parsedData];
}
So, to summarize, there are two issues in this project. The first being a way to store the selected date in the datepicker, and the second being a way to parse said selected date in the redirect guage/'${startDate}' URL to be used directly in the API call "http://172.16.10.100:5004/reports/{date}/agencies". This will return a JSON containing the object retrieved from a database (backend has been set up already).

Answer 1

Your onChange does the intended behavior of storing the value of the DatePicker input in your state as startDate. Passing the onSelect prop to the <DatePicker /> causes issues as the event parameter passed in to the onSelect is actually just the updated input value (you can see this if you console.log(event)). The <DatePicker /> component is just an input component, not an entire form. You should wrap the component in a form and pass the handleSubmit to an onSubmit prop of the form. There is an example in the React Router docs for useNavigate.
For the second part of your question, look into React Router's url parameters (guide, example). You can use the useParams() hook to get the startDate from the URL, and use that in your API call.