How to set filter date on the chart.js with useState?

Question

I want to set filter date on my chart and introduce the date buttons by a component named <ButtonDate />. I've decided that it's better to use useState to set change on the button and chart. I have problem to make it useful. could you please help me to solve this challenge...? :)

Part 1:

/// LineChart.js

import React from 'react';
import {Line} from 'react-chartjs-2';
import './chartStyle.css';
import JSONdata from "../json-csv/csvjson.json";
import ButtonDate  from '../Button/Buttonsdate'
import{Chart as ChartJS,
    LineElement,
    PointElement,
    CategoryScale,
    LinearScale,
    Tooltip,
    Legend,
    Colors} from 'chart.js';

    ChartJS.register(
        LineElement,
        PointElement,
        CategoryScale,
        LinearScale,
        Tooltip,
        Legend,
        Colors
      );

const LineChart = () => {

    ChartJS.defaults.backgroundColor = '#d90731';
    ChartJS.defaults.borderColor = '#000';
    ChartJS.defaults.color = '#000';

    const options = {
        scales: {
          x: {  
            grid: {
              color: 'gray',
              tention:3,
              borderColor: 'blue',
              backgroundColor:'white'
            }
          },
          y: { 
            grid: {
              color: 'gray',
              borderColor: 'blue
            }
          }
        }
      };

      /////// Get data From Json file to make chart datas
        const lables = JSONdata.map(row => row.Date);
        const datapoints = JSONdata.map(row => row.PUSCH);
        const chartData = {
        labels: lables,
        datasets:[{
          label:'PUSCH',
          data:datapoints,
          borderColor:'#0975ab',
          tention:0.1,
          backgroundColor:'#0975ab',
          Colors:'black',
          borderWidth:2.8,
          },
        ],
      };

    return (
        <div className='chartLinestyle'>
          <Line data={chartData}  options={options}/>
          <ButtonDate />
        </div>
    );
}

export default LineChart;

Other Component:

//ButtonsDate.js


import React ,{useState} from 'react';

const ButtonDate = () =>{
    const [dateSelect,setDateSelect] = useState('')
    const handleChange = (event) =>{
        if (event) event.preventDefault();
        setDateSelect(event.target.value)
    }
    console.log('dateSelect',dateSelect);
    return(
        <div>
        <input onChange={handleChange} type='date' id='startDate' value="9/1/23"></input>
        <input onChange={handleChange} type='date' id='enddate' value="9/12/23"></input>
        </div>
    )
};

export default ButtonDate;

Answer 1

I see that that data is loaded into your application from a json file and stored as a const. I would suggest that you store it as a state to dyonically change it (and trigger a rerender) then - I would suggest to store the date as a state in the parent (part 1) and give the child (part 2) a function to change it a rough sketch for the idea (havne't tested it) Part 1:

const LineChart = () => {
    
    // your code
    
    const options = {...};
      
      /////// declare your state
      const [lables, setLabels] = useState([]);
      const [datapoints, setDatapoints] = useState([]);
      const [date, setDate] = useState('<put default date here>')

      //initialize the data
      useEffect(() => {
        const filteredLables = JSONdata.map(row => row.Date).filer(() => {
            // make a filter function using the date state
        })

        const filteredDatapoints = JSONdata.map(row => row.Date).filer(() => {
            // make a filter function using the date state
        })

        setLabels(filteredLables)
        setDatapoints(filteredDatapoints)
    //set the dependencies array to date to trigger the useState again when it changes   
    }, [date])



      const chartData = {...};

  return (
      <div className='chartLinestyle'>
        <Line data={chartData}  options={options}/>
        <ButtonDate dateSelect={date} setDateSelect={(newDate) => setDate(newDate)}/>
      </div>
  );
}

part 2:

// dateSelected is the state from the parent
// setDateSelected is a function to update the state of the father
const ButtonDate = (dateSelect, setDateSelect) =>{
    const handleChange = (event) =>{
        if (event) event.preventDefault();
        setDateSelect(event.target.value)
    }
    console.log('dateSelect', dateSelect);
    return(
        <div>
        <input onChange={handleChange} type='date' id='startDate' value="9/1/23"></input>
        <input onChange={handleChange} type='date' id='enddate' value="9/12/23"></input>
        </div>
    )
};