Hello I'm trying to use a react-big-calendar component inside a function component for my use-case. So, when I use a react-datepicker, I'm getting this hook warning. Here is my code.
import format from "date-fns/format";
import getDay from "date-fns/getDay";
import parse from "date-fns/parse";
import startOfWeek from "date-fns/startOfWeek";
import React, { useState } from "react";
import { Calendar, dateFnsLocalizer } from "react-big-calendar";
import "react-big-calendar/lib/css/react-big-calendar.css";
import DatePicker from 'react-datepicker';
import "react-datepicker/dist/react-datepicker.css";
const enloc = {
"en-US": require("date-fns/locale/en-US"),
};
const localizer = dateFnsLocalizer({
format,
parse,
startOfWeek,
getDay,
enloc,
});
function CalendarComp(props) {
const meetings = [{
title: "Any meet",
start: new Date(2022, 9, 2, 7, 0, 0),
end: new Date(2022, 9, 2, 7, 0, 0),
}];
const [newMeeting, setNewMeeting] = useState({title: "", start: new Date(), end: new Date() });
const [allMeetings, setAllMeetings] = useState(meetings);
const handleAdd = () => {
console.log("jheee")
setAllMeetings([...allMeetings, newMeeting]);
}
return (
<div>
<input type="text" value={newMeeting.title} onChange={(e) => setNewMeeting({ ...newMeeting, title: e.target.value })} />
<DatePicker selected={newMeeting.start} onChange={(start) => setNewMeeting({ ...newMeeting, start })} />
<DatePicker selected={newMeeting.end} onChange={(end) => setNewMeeting({ ...newMeeting, end })} />
<button onClick={handleAdd}>
Add
</button>
<Calendar localizer={localizer} events={allMeetings} startAccessor="start" endAccessor="end" style={{ height: 500, margin: "50px" }} />
</div>
);
}
export default CalendarComp;This code is giving an invalid hooks call error. When I try to comment the DatePicker lines and run, it works fine. Can you tell what I'm missing exactly. I'm using react 17.0.2 version
index.js:1 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
Edit: This is the code for my Route Component
<Switch>
<Route exact path="/home" component={Dashboard} />
<Route exact path="/home/calendar" component={CalendarComp} />
</Switch>
Component Manager.js
import * as React from 'react';
export var ManagerReferenceNodeContext = React.createContext();
export var ManagerReferenceNodeSetterContext = React.createContext();
export function Manager(_ref) {
var children = _ref.children;
var _React$useState = React.useState(null),
referenceNode = _React$useState[0],
setReferenceNode = _React$useState[1];
var hasUnmounted = React.useRef(false);
React.useEffect(function () {
return function () {
hasUnmounted.current = true;
};
}, []);
var handleSetReferenceNode = React.useCallback(function (node) {
if (!hasUnmounted.current) {
setReferenceNode(node);
}
}, []);
return /*#__PURE__*/React.createElement(ManagerReferenceNodeContext.Provider, {
value: referenceNode
}, /*#__PURE__*/React.createElement(ManagerReferenceNodeSetterContext.Provider, {
value: handleSetReferenceNode
}, children));
}
