Search code examples
reactjsdatepickercalendar

React: TypeError: Cannot read properties of null (reading 'removeEventListener')

I'm using React and rendering a Calender (@sentisso/react-modern-calendar-datepicker) which can select a range of date.

I've a button. When I click this, I update the state of that button and if it is true, the datepicker will show. if it is false, I hide the datepicker using conditional rendering.

const [selectedDayRange, setSelectedDayRange] = useState({
    from: null,
    to: null  
});

return (
<>
    <input type="button" onClick={() => toggleDateRangeVisible()} />
    {isDateRangeVisible && 
        <Calendar
          value={selectedDayRange}
          onChange={setSelectedDayRange}
          shouldHighlightWeekends
        />
    }
</>
)

When I click the button, the datepicker is shown. but when I click it again to hide the datepicker, I got this error. (The state of the visible was changed)

Unhandled Runtime Error
TypeError: Cannot read properties of null (reading 'removeEventListener')

Call Stack
eval
node_modules/react-modern-calendar-datepicker/lib/index.js (1:19754)
safelyCallDestroy
node_modules/react-dom/cjs/react-dom.development.js (22932:0)
commitHookEffectListUnmount
node_modules/react-dom/cjs/react-dom.development.js (23100:0)
commitPassiveUnmountInsideDeletedTreeOnFiber
node_modules/react-dom/cjs/react-dom.development.js (25098:0)
commitPassiveUnmountEffectsInsideOfDeletedTree_begin
node_modules/react-dom/cjs/react-dom.development.js (25048:0)
commitPassiveUnmountEffects_begin
node_modules/react-dom/cjs/react-dom.development.js (24956:0)
commitPassiveUnmountEffects
node_modules/react-dom/cjs/react-dom.development.js (24941:0)
flushPassiveEffectsImpl
node_modules/react-dom/cjs/react-dom.development.js (27038:0)
flushPassiveEffects
node_modules/react-dom/cjs/react-dom.development.js (26984:0)
commitRootImpl
node_modules/react-dom/cjs/react-dom.development.js (26935:0)
commitRoot
node_modules/react-dom/cjs/react-dom.development.js (26682:0)
performSyncWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js (26117:0)
flushSyncCallbacks
node_modules/react-dom/cjs/react-dom.development.js (12042:0)
eval
node_modules/react-dom/cjs/react-dom.development.js (25651:0)

const toggleDateRangeVisible = () => setIsDateRangeVisible(!isDateRangeVisible);

Here is codesandbox. https://codesandbox.io/s/musing-shadow-x978yh?file=/src/App.js

Solution

  • This is an issue of the library with React v17. A contributor has created a fork to fix this. You could probably use that library for it.

    https://www.npmjs.com/package/@hassanmojab/react-modern-calendar-datepicker

    Github Thread: https://github.com/hassanmojab/react-modern-calendar-datepicker