At this point I've pretty much given up.
Objective : Get the input value from the date picker and use the value to filter out table results by date.
Problem: startDate I cannot seem to successfully convert it to a string, I can only console log it and use toLocaleDateString(). Should startDate be converted to string in the state ? or only when I want to use in a component ?
Here's my approach :
1 - I've installed react-datepicker but I can't seem to figure out how to extract the values to string. I can do only console log them with console.log(startDate.toLocaleDateString()), but I cannot pass them to another element.
2 - I've got my state in the top level parent component then I pass on the the props to the component DatePicker so nothing crazy here.
3 - Inside the filter function, I'm not sure I'm doing things right. I'm looping through my json object and trying to filter the dates by whatever I choose in the datepicker and this specific date "09/29/2022"; ( I will replace it later by end date )
4 - The filter function works great if I manually enter the values
.filter((items) => {
return items.date >= "09/01/2022" && items.date <= "09/29/2022";
})
but instead I'd like to replace 09/01/2022 by whatever value is chosen in the datepicker
my json object is pretty simple, I've got an income object with keys and values
...
income : [
{
"id": "",
"job": "...",
"date":"09/01/2022"
},
{
"id": "",
"job": "...",
"date":"09/20/2022"
},
{
"id": "",
"job": "...",
"date":"09/25/2022"
}
]
Here's the code from my top app level
import React from "react";
import { useState } from "react";
import { Typography, Box, Paper } from "@mui/material";
import { Stack } from "@mui/system";
import Picker from "../Picker";
const Dashboard = ({ income }) => {
const [startDate, setStartDate] = useState(new Date());
const onChange = (date) => {
setStartDate(date);
};
return (
...
<Stack>
{
income
.filter((items) => {
return items.date >= startDate.toLocaleDateString() && items.date <= "09/29/2022";
})
.map(...)
}
</Stack
...
export default Dashboard;
Here's what my datepicker looks
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { Box, Typography } from "@mui/material";
const Picker = ({ startDate, onChange }) => { return (
<Box>
<Box>
<Typography variant="subtitle2"> Date</Typography>
<DatePicker selected={startDate} onChange={onChange} />
</Box>
</Box> ); };
export default Picker;