supabase Dropdownの cannot appear as a descendant of

プログラミング

アイキャッチ_supabase_dropdown_error

supabase/ui を使った開発中に cannot appear as a descendant of エラーが出ました。

Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>.

cannot appear as a descendant of エラーの意味

タグの入れ子が不適切な場合に出力されるようです。

例えば、<p>タグの中に<div>タグが入っているなどです。

今回の例は、<button>タグの中に<button>タグが入ってしまっているために発生しています。

cannot appear as a descendant of の原因

結論から書くと、spabaseのDropdowコンポーネントが原因でした。

公式サイトのサンプルは以下の通り。

import {
  Button,
  Divider,
  Dropdown,
  IconClipboard,
  IconCopy,
  IconTrash,
  Typography,
} from '@supabase/ui'

export default function DropdownBasic() {
  return (
    <Dropdown
      overlay={[
        <Dropdown.Item icon={<IconClipboard />}>
          <Typography.Text>Copy</Typography.Text>
        </Dropdown.Item>,
        <Dropdown.Item icon={<IconCopy />}>
          <Typography.Text>Duplicate</Typography.Text>
        </Dropdown.Item>,
        <Divider light />,
        <Dropdown.Item icon={<IconTrash stroke="red" />}>
          <Typography.Text>Delete</Typography.Text>
        </Dropdown.Item>,
      ]}
    >
      <Button type="outline">Click me</Button>
    </Dropdown>
  )
}

このまま、コピペするとタイトルのエラーが出てしまいます。

gitのissueによると、ドキュメントの記述が誤っているようです。

解決方法

Dropdownタグの中以下の部分

<Button type="outline">Click me</Button>

を、次のように変更

<Button as="span" type="outline">Click me</Button>

これで、<button>タグが入れ子になることを防げるようです。

以上

参考

プログラミング

Posted by kotaro