[ERROR] DateRange: Maximum update depth exceeded

[ltalreja-gryphon]

Affected Projects Reactivesearch

Library Version: 4.2.0

Describe the bug Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

To Reproduce Steps to reproduce the behavior:

1. Go to the demo link mentioned in the docs - https://codesandbox.io/s/github/appbaseio/reactivesearch/tree/next/packages/web/examples/DateRange?from-embed=&file=/src/index.js
2. Try selecting any start/end date with DateRange component

Expected behavior Expect the results cards to be filtered out based on date range provided

Screenshots

Video https://github.com/appbaseio/reactivesearch/assets/85502721/55d20215-07ac-4223-a147-f57686137ddd

Desktop (please complete the following information):

• OS: macOS
• Browser: Chrome
• Version: 119.0.6045.123 (Official Build) (x86_64)

Additional context Have been facing a similar issue in my project where the app errors out if you select a daterange

[cmonteiro128]

Any workarounds for this?

[bpb27]

seeing this too, it's reproducible on the demo page: https://docs.reactivesearch.io/docs/reactivesearch/react/range/daterange/

current workaround is to just use two <DatePicker/> components with custom queries

<DatePicker
  componentId="startDate"
  dataField="date"
  title="Start Date"
  customQuery={value => dateQuery('gte', value)}
  URLParams={true}
/>
<DatePicker
  componentId="endDate"
  dataField="date"
  title="End Date"
  customQuery={value => dateQuery('lte', value)}
  URLParams={true}
/>

const dateQuery = (filter, value) =>
  validDatestring(value)
    ? {
        query: {
          range: {
            date: {
               // transform however you want before adding to the query
              [filter]: new Date(zonedTimeToUtc(value, 'America/New_York')).getTime(),
            },
          },
        },
      }
    : {};

in my case "date" is the mapped field name and it's type "long" so I transform it to a number before sending