React-datepicker to Filter Dashboard ( how to convert startDate to string )

Viewed 9

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;

0 Answers
Related