【Flowbite React】ドロップダウンの中にリストコンポーネントを入れようとして失敗した備忘録

Flowbite React

https://www.flowbite-react.com/docs/components/dropdown

Flowbite React ドロップダウン

基本の書き方

'use client';

import { Dropdown } from 'flowbite-react';

function Component() {
  return (
    <Dropdown label="Dropdown button" dismissOnClick={false}>
      <Dropdown.Item>Dashboard</Dropdown.Item>
      <Dropdown.Item>Settings</Dropdown.Item>
      <Dropdown.Item>Earnings</Dropdown.Item>
      <Dropdown.Item>Sign out</Dropdown.Item>
    </Dropdown>
  );
}

やりたかったこと

'use client';

import { Dropdown } from 'flowbite-react';

function Component() {
  return (
    <Dropdown label="Dropdown button" dismissOnClick={false}>
      <ListGroup>
        <ListGroup.Item>リスト</ListGroup.Item>
        <ListGroup.Item>リスト</ListGroup.Item>
        <ListGroup.Item>リスト</ListGroup.Item>
        <ListGroup.Item>リスト</ListGroup.Item>
      </ListGroup>
    </Dropdown>
  );
}

失敗した理由

• ドロップダウンの開閉はできたが、項目をクリックしても閉じなくなった
  • <Dropdown.Item> が <Dropdown> とセットになっているのは、この辺りの動的な処理を紐づけるためなんだろうな 💭