CODEWITHSUNDEEP
reactjsnext.jsnext.js13react-chrono
volkan
volkan

Reputation: 15

nextjs app router prop id not match react chrono

i created nextjs app with app router. and i have a page in app folder like app/about/page.jsx. i want to use react chrono library for timeline at that page.

so i created Timeline component at src/components/Timeline.

'use client'

import React from 'react'
import {Chrono} from 'react-chrono'

const Timeline = () => {
  const items = [
    {
      title: 'January 2022',
      cardTitle: 'Event 1',
      cardSubtitle: 'Event 1 Subtitle',
      cardDetailedText: 'This is the first event on the timeline.'
    },
    {
      title: 'February 2022',
      cardTitle: 'Event 2',
      cardSubtitle: 'Event 2 Subtitle',
      cardDetailedText: 'This is the second event on the timeline.'
    },
    {
      title: 'March 2022',
      cardTitle: 'Event 3',
      cardSubtitle: 'Event 3 Subtitle',
      cardDetailedText: 'This is the third event on the timeline.'
    }
  ]
  return (
    <Chrono
      mode="HORIZONTAL"
      items={items}
      showAllCardsHorizontal
      cardWidth={450}
      cardHeight={300}
      contentDetailsHeight={100}
      fontSizes={{
        title: '1rem'
      }}
      slideShow
      key={1}
    />
  )
}

and when i used in about page that component like ;

import Timeline from '@/components/Timeline'


export default function About() {
  return <Timeline />
}

i'm getting error like;

Warning: Prop `id` did not match. Server: "react-chrono-timeline-UECK0Np" Client: "react-chrono-timeline-BXPbvjM"

but if i import the timeline with next/dynamic with ssr false it working and i dont get error.

 const Timeline = dynamic(() => import('@/components/Timeline'), {ssr: false})

i think 'use client' and dynamic ssr false same things. where am i making the mistake, or is this the correct usage?

Upvotes: 1

Views: 307

Answers (1)

Ayoub Ghaninou
Ayoub Ghaninou

Reputation: 1

Try to add a condition checking if isClient is defined before returning the Chrono component:

const [isClient, setIsClient] = useState(false);

      useEffect(() => {
        setIsClient(true);   
}, []);

and then when returning :

{isClient && (
        <Chrono 
          items={items}
          mode="HORIZONTAL"
          theme={theme}
        />
      )}

Upvotes: 0

Related Questions