hypeserver / react-date-range

A React component for choosing dates and date ranges.
MIT License
2.59k stars 672 forks source link

Facing Cannot read property 'findIndex' of undefined /node_modules/react-date-range/dist/ utils.js #353

Open kaleshasheik opened 4 years ago

kaleshasheik commented 4 years ago

Subject of the issue

Describe your issue here. Getting Cannot read property 'findIndex' of undefined. Any suggestion ?

[BUG] Bug Reproduce Steps

Tell us how to reproduce this issue.

[BUG] Expected behaviour

Environment

Package Version: React version: Node version: Browser:

onurkerimov commented 4 years ago

Hello. Thanks for reporting this. Have you ran npm install date-fns in your project folder?. This issue might be related. If the problem continues please let me know so I can examine it. Thanks.

kiddailey commented 4 years ago

I had (I think) the same issue and installing date-fns does not resolve it. The error appears on the following line of utils.js:

function findNextRangeIndex(ranges) {
  var currentRangeIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : -1;
  var nextIndex = ranges.findIndex(function (range, i) { // <-- ERROR OCCURS HERE
    return i > currentRangeIndex && range.autoFocus !== false && !range.disabled;
  });
  if (nextIndex !== -1) return nextIndex;
  return ranges.findIndex(function (range) {
    return range.autoFocus !== false && !range.disabled;
  });
}
}

Passing in an empty range resolves the issue. I also had to pass an empty onChange as clicking a date without it also causes it to crash -- though other issues remain unfortunately.

<DateRangePicker 
    ranges={[]}
    onChange={() => {}}
/>
M-iEak47D commented 3 years ago

Any Solution to this issue yet ?

UbiJRL commented 3 years ago

Hello, I am also experiencing this exact issue and previously mentioned remedies have not worked. Has there been any progress on this front? Thanks in advance!

adventurini commented 3 years ago

+1 and we are using NextJS if that helps.

adventurini commented 3 years ago

By the way, it works as intended. You have to double check that you are modifying your state object to be exactly the way it is on the package with the selection and comparison.

StanlyLife commented 2 years ago

You get this error when ranges is malformed, in my case my object was:

{
    "startDate": "2022-06-01T00:00:00.000Z",
    "endDate": "2022-06-29T00:00:00.000Z",
    "key": "selection"
}

when ranges should be

[
    {
        "startDate": "2022-06-01T00:00:00.000Z",
        "endDate": "2022-06-29T00:00:00.000Z",
        "key": "selection"
    }
]

it should be of type array, not object