Warning: Text content did not match. Server: "33" Client: "30"

[Matheus Calixto]

Help-me, console error about countdown using Next.js

Console Error:

Client:

Code:

[Matheus Calixto]

@ndresx

[Martin V.]

Hi, does this help #101 (comment)?

[Matheus Calixto]

Hi, does this help #101 (comment)?

It only works if I add in each item in the list.

<li suppressHydrationWarning>
	{zeroPad(days)} <span>Days</span>
</li>
<li suppressHydrationWarning>
	{zeroPad(hours)} <span>Hours</span>
</li>
<li suppressHydrationWarning>
	{zeroPad(minutes)} <span>Minutes</span>
</li>
<li suppressHydrationWarning>
	{zeroPad(seconds)} <span>Seconds</span>
</li>

Is there another way?

[Martin V.]

Hmm, I don't think so, to be honest (I don't know). Maybe it works if you set autoplay to false and start it manually in the client.

[Thomas Moeskops]

For what it's worth, what helped me was adding a 'isLoaded' state variable and then setting it to true in UseEffect(). Then show countdown based on that.

  const [ isLoaded, setIsLoaded] = useState(false)

  ...

  useEffect(() => {
    setIsLoaded(true)
  }, [])

  ...

  { isLoaded &&
    <Countdown .../>
  }