Isomorphic / Server Side Rendering - Prop `id` did not match

When using react-accessible-accordion in combination with Next.js I get the following warning on occasion Prop 'id' did not match. Server: "accordion__title-X" Client: "accordion__title-X". I have multiple pages with different react-accessible-accordions, and this is what causes the issue I believe. The server uuid is mismatched with the client uuid.

Would it be possible to add a ResetIdCounter similar to react-tabs? Or is there already a solution I am unaware of?

[ryami333]

@HPieters, you should now be able to import { resetNextUuid } from 'react-accessible-accordion'. Let us know how you get on with the upgrade 😀

[dcheglakov]

Sorry for resurrecting this issue. I’ve tried resetNextUuid() it resets id, but I still have an error in the developer console.

Warning: Prop `id` did not match. Server: "accordion__heading-raa-0" Client: "accordion__heading-raa-1"
    at div
    at AccordionItemButton (webpack-internal:///./node_modules/react-accessible-accordion/dist/es/index.js:753:29)
    at Consumer (webpack-internal:///./node_modules/react-accessible-accordion/dist/es/index.js:598:5)
    at AccordionItemButtonWrapper
    at div
    at AccordionItemHeading (webpack-internal:///./node_modules/react-accessible-accordion/dist/es/index.js:845:5)
    at Consumer (webpack-internal:///./node_modules/react-accessible-accordion/dist/es/index.js:598:5)
    at AccordionItemHeading...

Here is my code

import PropTypes from 'prop-types'
import {
  Accordion,
  AccordionItem,
  AccordionItemHeading,
  AccordionItemButton,
  AccordionItemPanel,
  resetNextUuid,
} from 'react-accessible-accordion'

export default function Faq({ title, faq }) {
  resetNextUuid()
  return (
    <div className="py-32">
      <h2 className="pb-20 text-center">
        {title} <span className="text-red">FAQ</span>
      </h2>
      <Accordion>
        {faq.map((item, index) => (
          <AccordionItem key={item.id}>
            <AccordionItemHeading className="py-6 border-b border-suva-grey border-opacity-50">
              <AccordionItemButton>
                <h4>
                  <span className="pr-8 text-red">{`0${index + 1}`}</span>
                  {item.question}
                </h4>
              </AccordionItemButton>
            </AccordionItemHeading>
            <AccordionItemPanel>
              <p className="py-8 text-suva-grey lg:w-11/12">{item.answer}</p>
            </AccordionItemPanel>
          </AccordionItem>
        ))}
      </Accordion>
    </div>
  )
}

Faq.propTypes = {
  title: PropTypes.string.isRequired,
  faq: PropTypes.array.isRequired,
}

What I’m doing wrong?