CODEWITHSUNDEEP
reactjstypescriptnext.jsreact-datepickerhookstate
Lucas Steffen
Lucas Steffen

Reputation: 1364

react-datepicker Date error with hookstate and nextjs

Here's a page in nextjs:

import type { NextPage } from "next";
import DatePicker from "react-datepicker";
import { useState as useStateHook } from "@hookstate/core";
import { useState as useStateReact } from "react";

const PageDate: NextPage = () => {
  const [reactDate, setReactDate] = useStateReact(new Date());
  const hookDate = useStateHook(new Date());
  const showDate = useStateHook(false);

  return (
    <>
      <div>
        <div>ReactDate</div>
        <DatePicker
          selected={reactDate}
          onChange={(date) => setReactDate(date as Date)}
        />
      </div>
      <div>
        <div>HookDate</div>
        <DatePicker
          selected={hookDate.value}
          onChange={(date) => hookDate.set(date as Date)}
        />
      </div>
      <div>
        <div onClick={() => showDate.set(true)}>HookDate (rendered front)</div>
        {showDate.value && (
          <DatePicker
            selected={hookDate.value}
            onChange={(date) => hookDate.set(date as Date)}
          />
        )}
      </div>
    </>
  );
};

export default PageDate;

If you run the way it is you'll get the error:

TypeError: this is not a Date object.

If you comment the second DatePicker it will render fine. Once you click the div to render the third DatePicker you'll get the error:

TypeError: Date.prototype.getTime called on incompatible Proxy

With the following snippet:

.next\static\chunks\pages\form2.js (39:0) @ toDate

  37 | if (argument instanceof Date || typeof argument === 'object' && argStr === '[object Date]') {
  38 |   // Prevent the date to lose the milliseconds when passed to new Date() in IE10
> 39 |   return new Date(argument.getTime());
  40 | } else if (typeof argument === 'number' || argStr === '[object Number]') {
  41 |   return new Date(argument);
  42 | } else {

And if you change the third one to use new Date(hookDate.value) instead of just hookDate.value you'll get the error:

TypeError: _this.child(...).get is not a function

With the snippet:

.next\static\chunks\pages\_app.js (823:0) @ ./node_modules/@hookstate/core/dist/index.es.js/StateMethodsImpl.prototype.valueObjectImpl/StateMethodsImpl<

  821 |         return target[key];
  822 |     }
> 823 |     return _this.child(key).get();
  824 | }, function (target, key, value) {
  825 |     if (typeof key === 'symbol') {
  826 |         // allow clients to associate hidden cache with state values

Using a console.log shows that hookDate.value is indeed a Date

The versions from the package.json file:

"@hookstate/core": "^3.0.13",
"next": "11.1.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-datepicker": "^4.5.0",

Then I realized there was a newer version of next so I upgraded to "^12.0.7" the errors are the same the snippet for the last one now shows this:

pages\form2.tsx (31:22) @ PageDate

  29 | {showDate.value && (
  30 |   <DatePicker
> 31 |     selected={new Date(hookDate.value)}
     |              ^
  32 |     onChange={(date) => hookDate.set(date as Date)}
  33 |   />
  34 | )}

Upvotes: 1

Views: 684

Answers (1)

Andrew
Andrew

Reputation: 2135

Hookstate 3 had limitations on what data can be stored in the state. Date can not be.

Hookstate 4 has addressed this. In Hookstate 4 you can store any objects.

Upvotes: 1

Related Questions