React Collapse Component

Common errors

• TypeError: Cannot read properties of undefined (reading 'Panel')

  cause Attempting to destructure `Panel` from `rc-collapse` when `Collapse` was imported as a named export or incorrectly.
  fix Ensure `Collapse` is imported as a default export: `import Collapse from 'rc-collapse';` and then access `Panel` as a property: `const { Panel } = Collapse;`

• Module not found: Can't resolve 'rc-collapse/assets/index.css' in '...'

  cause The required CSS file for `rc-collapse` styles is not being imported or is imported with an incorrect path.
  fix Add `import 'rc-collapse/assets/index.css';` to your main application file or the component using `rc-collapse`.

• Warning: Each child in a list should have a unique "key" prop.

  cause When using `Collapse.Panel` components, each `Panel` must have a unique `key` prop, especially when used in lists or dynamically generated. The `key` prop is also used by `activeKey` to identify panels.
  fix Ensure every `<Panel>` component has a unique and stable `key` prop, e.g., `<Panel key="1" header="Panel 1">...</Panel>`.

Warnings

• breaking The `rc-collapse` package, particularly at version 4.0.0, is effectively succeeded by the `@rc-component/collapse` package. While `rc-collapse@4.0.0` is a stable release, all future development, bug fixes, and new features will occur under the new package name. Migrating to `@rc-component/collapse` is highly recommended for ongoing projects.
  Fix: Migrate your package dependency from `rc-collapse` to `@rc-component/collapse`. Review the changelogs for `@rc-component/collapse` as there may be API changes (e.g., the introduction of the `items` prop). Check the official repository for the latest migration guide if available.
• deprecated The use of `<Collapse.Panel>` components as children to define panels is deprecated starting from `rc-collapse@4.0.0`. The successor package, `@rc-component/collapse`, primarily uses an `items` prop on the `Collapse` component for defining panel content and properties. While `Panel` components might still function in `v4.0.0`, they are not the forward-looking approach.
  Fix: For new development or when migrating to `@rc-component/collapse`, use the `items` prop instead of `Collapse.Panel` children. For example: `<Collapse items={[{ key: '1', label: 'Panel Header', children: 'Panel Content' }]} />`.
• gotcha CSS styles are not automatically included and must be imported separately. For `rc-collapse`, the styles are located at `rc-collapse/assets/index.css`.
  Fix: Ensure you add `import 'rc-collapse/assets/index.css';` to your application's entry point or a relevant component file.
• gotcha The `Collapse` component is a default export, meaning it should be imported without curly braces. Its `Panel` sub-component is exposed as a static property, not a named export.
  Fix: Use `import Collapse from 'rc-collapse';` for the main component. Access the Panel via `const { Panel } = Collapse;`.

Install

• npm install rc-collapse npm
• yarn add rc-collapse yarn
• pnpm add rc-collapse pnpm

Imports

• Collapse
  wrong:

  import { Collapse } from 'rc-collapse';

  correct:

  import Collapse from 'rc-collapse';

  The main Collapse component is a default export.
• Panel (via Collapse)
  wrong:

  import { Panel } from 'rc-collapse';

  correct:

  import Collapse from 'rc-collapse';
  const { Panel } = Collapse;

  Panel is a static property of the default Collapse export, not a named export itself. Note that `Panel` components are deprecated in `v4.0.0` in favor of an `items` prop (though `items` primarily gained full functionality in the successor package `@rc-component/collapse`).
• CSS Styles

  import 'rc-collapse/assets/index.css';

  Import the default styles separately to ensure correct rendering.

Quickstart

Demonstrates a basic multi-panel collapse component with initial active state, change handler, and importing necessary styles. Shows deprecated `Panel` component usage as `items` prop was not fully introduced until the successor package.

import React, { useState } from 'react';
import ReactDOM from 'react-dom/client';
import Collapse from 'rc-collapse';
import 'rc-collapse/assets/index.css';

const { Panel } = Collapse; // Panel is a static property, but deprecated in v4.0.0 in favor of 'items' prop for the successor package

function App() {
  const [activeKey, setActiveKey] = useState(['1']);

  const handleChange = (keys) => {
    setActiveKey(keys);
    console.log('Active keys changed:', keys);
  };

  return (
    <div style={{ maxWidth: '600px', margin: '20px auto' }}>
      <h1>RC Collapse Example (v4.0.0)</h1>
      <Collapse
        accordion={false}
        activeKey={activeKey}
        onChange={handleChange}
        destroyInactivePanel={true}
      >
        <Panel header="This is Panel 1" key="1">
          <p>Content for the first panel.</p>
          <p>You can put any React nodes here.</p>
        </Panel>
        <Panel header="This is Panel 2" key="2">
          <p>Content for the second panel.</p>
        </Panel>
        <Panel header="This is Panel 3 (Accordion Mode Disabled)" key="3">
          <p>Content for the third panel.</p>
          <p>Since accordion is false, multiple panels can be open.</p>
        </Panel>
      </Collapse>
    </div>
  );
}

const container = document.getElementById('root');
if (container) {
  const root = ReactDOM.createRoot(container);
  root.render(<App />);
} else {
  console.error('Root element not found');
}