DataCloneError: Failed to execute 'pushState' on 'History'

Question

I am new to Reactjs. I wanted to input date-range from user and pass it to second page(search) but I got the error(DataCloneError: Failed to execute 'pushState' on 'History'.) when I pass states endDate and startDate.It works fine when I pass any sample string(example - startdate:"sample"). Please help me to get rid of this error.

import React from "react";
import { Link } from "react-router-dom";
import "react-bootstrap";
import { DateRangePicker } from "react-dates";
import "react-dates/initialize";
import "react-dates/lib/css/_datepicker.css";

function Filters() {
  const [dateRange, setdateRange] = React.useState({
    startDate: null,
    endDate: null,
  });
  const [focus, setFocus] = React.useState(null);
  const { startDate, endDate } = dateRange;
  return (<>
          <DateRangePicker
            startDatePlaceholderText="Check-in"
            endDatePlaceholderText="Check-out"
            startDate={startDate}
            endDate={endDate}
            numberOfMonths={1}
            onDatesChange={({ startDate, endDate }) =>
              setdateRange({ startDate, endDate })
            } 
            showClearDates={true}
            focusedInput={focus}
            onFocusChange={(focus) => setFocus(focus)}
            startDateId="startDateMookh"
            endDateId="endDateMookh"
            minimumNights={1}
          />
        
          <Link to={{ pathname: "/search", state: {
                startdate: "startdate",
                enddate: endDate,
                },}}>
            <div className="search">
              <p>Search</p>
            </div>
          </Link>
        </>
  );
}

export default Filters;

This is second page (search)

import React from "react";
import Hotellist from "./components/hotellist";
import Filters from "./components/filters";
import { useLocation } from "react-router";

function List() {
  const location = useLocation();
  const {startdate, enddate} = location.state;
  console.log(startdate, enddate);
  return (
   <>
    </>
  );
}

score 1 · Accepted Answer · answered Oct 04 '21 at 04:50

What I could find is that startDate and endDate are not just dates. They hold more data than that. To get only date or to send data to other page use moment

import moment from "moment"

Send it like this

startdate: moment(startDate).format("yyyy-MM-dd")

DataCloneError: Failed to execute 'pushState' on 'History'

1 Answers1