Doesn't work in next.js project

[ojelicoder]

Hello there,

I'm adding to my Next.js project as follows.
import AddToCalendarHOC from 'react-add-to-calendar-hoc';

const AddToCalendarModal = AddToCalendarHOC (Button, CalendarModal),
isiOS = /iPad|iPhone|iPod/.test(navigator.userAgent),
[event, setEvent] = useState (null);
useEffect(() => {
const startDatetime = moment (). utc (). add (2, 'days'),
endDatetime = startDatetime.clone (). add (2, 'hours'),
duration = moment.duration(endDatetime.diff(startDatetime)).asHours();

    const event = {
        description: 'Description of event. Going to have a lot of fun doing things that we scheduled ahead of time.',
        duration,
        endDatetime: endDatetime.format('YYYYMMDDTHHmmssZ'),
        location: 'NYC',
        startDatetime: startDatetime.format ('YYYYMMDDTHHmmssZ'),
        title: 'Super Fun Event',
    }

    setEvent (event);
})

and I am getting error as below.
ReferenceError: CalendarModal is not defined

Can you help me?

[jasonleibowitz]

Yea, that's because you never imported or defined CalendarModal. If you look at the code of the examples, you'll see that CalendarModal is imported here.

I just created a very simple CalendarModal as an example, but as this is a HOC, you should use whatever component you want. The CalendarModal example uses react-modal.

[ojelicoder]

Hi @jasonleibowitz ,

Thank you so much for your answer.. Yes, when I add a modal, this error is gone, but the modal does not open. You can see it in the screenshot. Where exactly am I going wrong?

[ojelicoder]

Hi @jasonleibowitz,

After a few edits I see it working.

Thank you so much.