Change State Between Page (Parent) and Datepicker (Child) Components from query string

Hi everyone I have this Datepicker component and I managed to get the state in the parent (Inertia Page) by passing a function:setParentDate

import React, { useState } from 'react';


import DatePicker from 'react-datepicker';
import '../../css/react-datepicker.css';

export default function TableDatePicker({setParentDate}) {
  const [dateRange, setDateRange] = useState([null, null]);
  const [startDate, endDate] = dateRange;
  return (
    <DatePicker
      selectsRange={true}
      startDate={startDate}
      endDate={endDate}
      onChange={(update) => {
        setDateRange(update);
        setParentDate([startDate, endDate])
      }}
      isClearable={true}
      showPopperArrow={false}
      dateFormat="dd/MM/yyyy"

    />
  );
}

But I need to set the date in first load from query string too:

import { Head } from '@inertiajs/react';
import Layout from '@/Layouts/Layout';
import Pagination from '@/Components/DataDisplay/Pagination';
import { useState, useEffect, useRef } from 'react';
import { router } from '@inertiajs/react';
import TableDatePicker from '@/Components/TableDatePicker';

export default function Index({ users, filters }) {
  const [searchTerm, setSearchTerm] = useState(filters.search);
  const searchDebounceTimer = useRef(null);
  const [dateRange, setDateRange] = useState([null,null]);
  const searchUsers = () => {
    if (searchTerm !== null) {
      // Format Date String
      const fromDate = dateRange[0]
        ? dateRange[0].toISOString().slice(0, 10)
        : null;
      const toDate = dateRange[1]
        ? dateRange[1].toISOString().slice(0, 10)
        : null;
      router.get(
        '/users',
        {
          search: searchTerm,
          dateStart: fromDate,
          dateEnd: toDate,
        },
        {
          preserveState: true,
          replace: true,
        }
      );
    }
  };

  useEffect(() => {
    clearTimeout(searchDebounceTimer.current);
    searchDebounceTimer.current = setTimeout(searchUsers, 200);
  }, [searchTerm, dateRange]);

  const handleInputChange = (e) => {
    e.preventDefault();
    setSearchTerm(e.target.value);
  };

  const { data, links } = users;
  return (
    <>
      <Head title="Users" />
      <div>
        <input
          type="text"
          value={searchTerm ?? ''}
          onChange={handleInputChange}
          placeholder="Search..."
        />
      </div>
      <div>
        <div className="py-1">
          <TableDatePicker setParentDate={setDateRange} />
        </div>
      </div>
      <table className="min-w-full divide-y divide-gray-300">
			.... table markup ....
      </table>
      <Pagination links={links} />
    </>
  );
}

Index.layout = (page) => <Layout children={page} />;

This way I just can get the Start Date and End Date from child (datepicker). But I also want to have a way to set their initial if the query string contains any similar to:

  const [dateRange, setDateRange] = useState([filters.dateStart, filters.dateEnd]);

in controller something similar to this is happening:
        $filters['dateStart'] = Request::input('dateStart');
        $filters['dateEnd'] = Request::input('dateEnd');

I need to not only read the date values of child in parent, but be able to set the values from query string in parent to child. Could you please help me how I can achieve this? I tried to create startDate setStartDate endDate setEndDate and pass them to Datepicker Compoenet but it wont work in the datepicker, Dates need to be defined inside datepicker compoenet

I really appreciate your help Regards

martinbean

2 years ago

Level 80

But I need to set the date in first load from query string too:

@emmatraversy Pass it from your controller, as a page prop:

public function someAction(Request $request)
{
    return Inertia::render('Some/Page')->with([
        'defaultDate' => $request->query('start_date') ?? Date::now()->toDateString(),
    ]);
}

Please or to participate in this conversation.