2

I get in the app error that a non-serializable value was detected in the state and generally it's connected to date format from Calendar component from PrimeReact. I was googling the reason if I understand correctly the issue is that property handling data in my app has type of object, but to be serializable it should be a string. Am I correct?

I face issue with changing this property to be as string as in CalendarProps from PrimeReact value where I pick date is typed as Date. Is it possible to change this format to string?

Below is the comment I get from Typescript

(property) value?: Date | Date[] | undefined
No overload matches this call.
  Overload 1 of 2, '(props: CalendarProps | Readonly<CalendarProps>): Calendar', gave the following error.
    Type 'string' is not assignable to type 'Date | Date[] | undefined'.
  Overload 2 of 2, '(props: CalendarProps, context: any): Calendar', gave the following error.
    Type 'string' is not assignable to type 'Date | Date[] | undefined'.ts(2769)

I found the solution that it's possible to switch off the serializableCheck, but would prefer to firstly see if it's possible to fix this error in other way.

const customizedMiddleware = getDefaultMiddleware({
  serializableCheck: false
})

thanks

James Z
  • 12,209
  • 10
  • 24
  • 44
marcinb1986
  • 708
  • 1
  • 11
  • 30

1 Answers1

1

I bumped into this issue a while back when I was building a calendar in React. The solution I came up with was to convert the Date object to a timestamp since numbers are serializable.

let timestamp = date.getTime();

Also, numbers take way less space in memory than strings, so double benefit!
To get the Date object back, you can just construct a new Date from the timestamp:

let date = new Date(timestamp);
Nicholas Obert
  • 1,235
  • 1
  • 13
  • 29