I used dayjs lib, I pass two props to component, but inside component I got wrong date, server gave me two dates:

horizontStart: '2025-01-29T00:00:00Z'
horizontEnd: '2025-04-01T00:00:00Z'

inside component GanttChartOrders I use useState to write this constant via dayjs, like

const [initialStart, setInitialStart] = useState(dayjs(horizontStart))
const [initialEnd, setInitialEnd] = useState(dayjs(horizontEnd))

but initialEnd is initiated as today's date, and I can't figure out why, because I have const enddate. It seems like I always have default values ​​and it not updating when I get data. But in console.log I see updated values.

<GanttChartOrders
  horizontStart={new Date(gantt?.horizont_start || new Date(new Date().getFullYear(), 0, 1))}
  horizontEnd={new Date(gantt?.horizont_end || new Date())}
  data={gantt || []}
  isTooltip={true}
  tooltip={tooltip}
  inferringId={inferringId}
  filterType={filterType}
  ganttType={ganttType}
/>

//logs inside GanttChartOrders

// initial start and end dates
const [initialStart, setInitialStart] = useState(dayjs(horizontStart))
const [initialEnd, setInitialEnd] = useState(dayjs(horizontEnd))

console.log(horizontStart)
console.log(horizontEnd)
console.log(initialStart)
console.log(initialEnd)

//logs
Wed Jan 29 2025 03:00:00 GMT+0300 (Moscow Standard Time)
Tue Apr 01 2025 03:00:00 GMT+0300 (Moscow Standard Time)
M2 {$L: 'en', $u: undefined, $d: Wed Jan 01 2025 00:00:00 GMT+0300 (Moscow Standard Time), $y: 2025, $M: 0, …}
M2 {$L: 'en', $u: undefined, $d: Tue Mar 04 2025 18:18:41 GMT+0300 (Moscow Standard Time), $y: 2025, $M: 2, …}

I used dayjs lib, I pass two props to component, but inside component I got wrong date, server gave me two dates:

horizontStart: '2025-01-29T00:00:00Z'
horizontEnd: '2025-04-01T00:00:00Z'

inside component GanttChartOrders I use useState to write this constant via dayjs, like

const [initialStart, setInitialStart] = useState(dayjs(horizontStart))
const [initialEnd, setInitialEnd] = useState(dayjs(horizontEnd))

but initialEnd is initiated as today's date, and I can't figure out why, because I have const enddate. It seems like I always have default values ​​and it not updating when I get data. But in console.log I see updated values.

<GanttChartOrders
  horizontStart={new Date(gantt?.horizont_start || new Date(new Date().getFullYear(), 0, 1))}
  horizontEnd={new Date(gantt?.horizont_end || new Date())}
  data={gantt || []}
  isTooltip={true}
  tooltip={tooltip}
  inferringId={inferringId}
  filterType={filterType}
  ganttType={ganttType}
/>

//logs inside GanttChartOrders

// initial start and end dates
const [initialStart, setInitialStart] = useState(dayjs(horizontStart))
const [initialEnd, setInitialEnd] = useState(dayjs(horizontEnd))

console.log(horizontStart)
console.log(horizontEnd)
console.log(initialStart)
console.log(initialEnd)

//logs
Wed Jan 29 2025 03:00:00 GMT+0300 (Moscow Standard Time)
Tue Apr 01 2025 03:00:00 GMT+0300 (Moscow Standard Time)
M2 {$L: 'en', $u: undefined, $d: Wed Jan 01 2025 00:00:00 GMT+0300 (Moscow Standard Time), $y: 2025, $M: 0, …}
M2 {$L: 'en', $u: undefined, $d: Tue Mar 04 2025 18:18:41 GMT+0300 (Moscow Standard Time), $y: 2025, $M: 2, …}

• reactjs
• dayjs

Share Improve this question Follow edited Mar 4 at 15:40 David Abramov asked Mar 4 at 15:09 David AbramovDavid Abramov 5377 bronze badges 3

• It would suggest that gnatt?.horizonEnd is undefined, as Date()'s default construction generates a Date object for todays date. Can you add a contextual console.log of your gnatt object? – Sa'id Kharboutli Commented Mar 4 at 15:15
• Updated question, added logs. Dates are totaly wrong. – David Abramov Commented Mar 4 at 15:22
• The dates are only incorrect in so far as they are your fallback values. For horizon_start its the first of January because your fallback is a Date object set to the first of January of the current year (using another Date object to get that data, which you likely do not need to do). The horizon_end is the other fallback value, the current Datetime. This again means that your gantt object is likely undefined. I don't see any mention of the gantt object besides when you're reading from it. Where are you writing the values to it? Can you log gantt? – Sa'id Kharboutli Commented Mar 4 at 16:01

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

The problem was that I needed to use UseEffect to get the updated values, but it's not that obvious in my case.