CODEWITHSUNDEEP
javascriptreactjsnext.jsserver-side-rendering
Nugraha
Nugraha

Reputation: 23

Nextjs Error: Text content does not match server-rendered HTML

I have problem with error Error: Text content does not match server-rendered HTML.

so I have dateTime from API for example '2022-12-25T11:22:37.000Z' and I put on component Countdown

but i've got error messages Error: Text content does not match server-rendered HTML. enter image description here

here my code `

import React from 'react'
import { Box } from '@mui/material'
import { IFlashBanner } from '../../../interface/flashBanner'
import Countdown from 'react-countdown'
import moment from 'moment'

const FloatingFlashSale = ({
  id,
  title,
  dicount,
  countdownTime,
  image,
}: IFlashBanner) => {
  const a = moment('2022-12-25T11:22:37.000Z').valueOf()
  const b = Date.now() + 1000 * 60 * 60 // if using this variable rendering not thorwing error but i want consume from API
  const c = new Date('2022-12-25T11:22:37.000Z').valueOf()

  return (
    <Box
      display="flex"
      sx={{
        backgroundImage: `url(${image})`,
        backgroundSize: '100%',
        backgroundRepeat: 'no-repeat',
      }}
    >
      <Countdown date={b} />
    </Box>
  )
}

export default FloatingFlashSale

`

How I fix not thowring error Error: Text content does not match server-rendered HTML.

I read valid values on Countdown on docs but still error here lib I used https://github.com/ndresx/react-countdown

hope you help me

Thanks

Upvotes: 1

Views: 422

Answers (1)

Ahmed Sbai
Ahmed Sbai

Reputation: 16219

first you convert your ISOString to Date

const date = new Date('2022-12-25T11:22:37.000Z'); // you don't need valueOf

then

<Countdown date={date} />

I don't know why you add 3600000 to your date

Upvotes: 1

Related Questions