CODEWITHSUNDEEP
reactjsdatepickercalendar
Siri
Siri

Reputation: 129

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

Upvotes: 5

Views: 3366

Answers (4)

Md Arif Khan
Md Arif Khan

Reputation: 49

There is a temporary package availabe, as suggested in the issue on GitHub:

You can download and install it using:

npm install --save @hassanmojab/react-modern-calendar-datepicker

Then change all the imports to:

import '@hassanmojab/react-modern-calendar-datepicker/lib/DatePicker.css';
import DatePicker from '@hassanmojab/react-modern-calendar-datepicker';

This is a temporary package as a solution just for this issue and won't be developed.

Upvotes: 2

renosytr
renosytr

Reputation: 56

I tried the library @sentisso/react-modern-calendar-datepicker in my project and this issue happened, in my case I use Next JS 13.1.6 with React 18.2.0. The case is:

When I try to change the display of date picker component from none to block, it goes perfect but if the condition is reversed, from display block to none, it returns the error which cannot read property 'removeEventListener' of null.

I believe it is related to the issue of the react framework, since it has been pointed 2 years ago here in github repo of the React 17

But, strange is that when I tried the same code with another date picker from react-datepicker the problem is gone. You can switch between condition using react-datepicker without error.

Upvotes: 0

1harshh
1harshh

Reputation: 41

You can use date picker alternatives like:

NPM Package: https://www.npmjs.com/package/react-datepicker

Github Link as an example: https://github.com/Hacker0x01/react-datepicker

Upvotes: 0

G Sriram
G Sriram

Reputation: 555

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

Upvotes: 4

Related Questions