How to make component to re render after changing State and pressing button

Question

I'm new to react and I'm developing a component that uses a DatePicker and with the date selected it renders Pages that contain some charts.

My problem here is that every time I change the startDate variable by selecting a new date in the DatePicker. And the desired behavior I'd like to have here is to:

1. Select the date from the Date Picker
2. Press button "Update dashboard"
3. Re render all components

I.e, wait for the button to be pressed to re render all components.

Can someone explain to me how can I manage to implement this behavior?

import React, { useState, useEffect } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
 
// CSS Modules, react-datepicker-cssmodules.css// 
import 'react-datepicker/dist/react-datepicker-cssmodules.css';
import Spinner from '../../components/layout/Spinner';



//Cards Paginas
import Pagina1 from '../../components/tableros/Cards/Pagina1';
import Pagina2 from '../../components/tableros/Cards/Pagina2';
import Pagina3 from '../../components/tableros/Cards/Pagina3';
import Pagina4 from '../../components/tableros/Cards/Pagina4';
import Pagina5 from '../../components/tableros/Cards/Pagina5';
import Pagina6 from '../../components/tableros/Cards/Pagina6';

const ReporteDiario = () => {

  
  const [startDate, setStartDate] = useState(new Date());
  const [renderPages, setRenderPages] = useState(true);

  const handleClick = () => {
    setRenderPages(!renderPages);
  }

  // Para poder actualizar los componentes cada que se cambie la fecha
  useEffect(() => {
  }, [renderPages]);

  function PagesComponent() {
    return (
      <div className="cards-container">
        <Pagina1 
          date={startDate} />
        <Pagina2  />
        <Pagina3  />
        <Pagina4  />
        <Pagina5 />
        <Pagina6 />
      </div>
    );
  }
  return (
    <>
    <aside className='col-span-2 border-2 border-blue-600'>
        <div className="form-group">  
        <DatePicker
          selected={startDate}
          showIcon
          onChange={(date) => setStartDate(date)}
          isClearable
          dateFormat="yyyy-MM-dd"
          placeholderText="Select date"
          closeOnScroll={true}
        />
        </div>  
    </aside>

    

    <div>
    <button id='ReporteDiario' onClick={handleClick} className='text-left pl-1 my-1 border-2 border-blue-600'>
       Update Dashboard
    </button>
    {renderPages && <PagesComponent/>}
    </div>

    </>
  )
}

export default ReporteDiario

I've been looking how to use hooks like useEffect, useRef, but at the moment I haven't been able to handle this.

Answer 1

David you can use Refs in react. you can do it update the ref and on button press update the state from the ref.

Hope this helps :)

You do instead of changing the state directly. Have a func that store's the value in a ref Ex:

const myRef = useRef(new Date());

And changes on datepicker component

<DatePicker
    selected={startDate}
    showIcon
    onChange={(date) => setStartDate(date)}
    isClearable
    dateFormat="yyyy-MM-dd"
    placeholderText="Select date"
    closeOnScroll={true}
/>

change the handleClick using the value from ref

const handleClick = () => {
  // setRenderPages(!renderPages);
  setStartDate(myRef.current)
}

Bdw, Here is a working demo.