SSR problems

Describe the bug

Differences in generated HTML on server and client cause a warning in Next.js:

react-dom.development.js:67 Warning: Prop aria-controls did not match. Server: “collapsible-content-1632766367544” Client: “collapsible-content-1632766370864”

Currently it needs to be patched or excluded from server rendering to avoid the issue.

It’s expected that this also causes problems with React server renderer in general.

To Reproduce

Use the component with Next.js

Expected behavior

The component could provide a way to override this behaviour for content id similarly to how it’s done for trigger id with triggerElementProps.

Additional context

react-collapsible@2.8.4 next@11.1.0

[glennflanagan]

I think if add the ability to override this.contentId this would be a quick workaround? The users using SSR can set it theirselves preventing the difference at re-hydration

[stephank]

React 18 added a useId hook for this purpose. I’m using a simple wrapper around Collapsible that looks like:

import { useId } from 'react'
import BaseCollapsible, { CollapsibleProps } from 'react-collapsible'

export function Collapsible(props: CollapsibleProps) {
  const id = useId()

  return (
    <BaseCollapsible
      {...props}
      contentElementId={`collapsible-content-${id}`}
      triggerElementProps={{
        ...props.triggerElementProps,
        id: `collapsible-trigger-${id}`,
      }}
    />
  )
}