Search code examples
reactjsmigrationaccordionreact-bootstrapbootstrap-accordion

Panel.Collapse in React-Bootstrap v1

I am migrating from react-bootstrap v0.32.4 to v1.0.0-beta.5 and it is written in the migration guide that Panel has been replaced by the Card component.

However, I cannot find anything in the new documentation of Card similar to the old Panel.Collapse from v0.32.

How can the following (from v0.32.4) be done with react-bootstrap v1 by not mixing clean JSX code with plain bootstrap css classes (e.g. accordion)?

<Panel>
    <Panel.Heading>
        <Panel.Title toggle>Click Me</Panel.Title>
    </Panel.Heading>
    <Panel.Collapse>
        <Panel.Body>Collapsible Body</Panel.Body>
    </Panel.Collapse>
</Panel>
Solution

  • It took a bit of digging, but I found this link:

    https://react-bootstrap.github.io/utilities/transitions/#collapse

    where it appears to have extracted the Collapse logic out of Panel and put it into it's own component, managed by boolean state.