起きていた事象
Radix UI を使ってUIを作っていて、ある画面でconsoleにwarningが表示されていた。
Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>.
言い換えると<button>タグは<button>タグの子孫タグに出来なってことです。
Reactのソースコードにはもちろんそんな記述ないのですが、Chromeで検証してみると確かに<button>タグの中に<button>タグが出来ていた。
修正
調査してみるとRadix UI のtooltipの中にbuttonを配置しているのが原因だった。 www.radix-ui.com Tooltip – Radix UI
公式docどおりですが一応コード書きます。
const TooltipDemo = () => {
return (
<Tooltip.Provider>
<Tooltip.Root>
<Tooltip.Trigger>
<button>
hoge
</button>
</Tooltip.Trigger>
</Tooltip.Root>
</Tooltip.Provider>
);
};
↑こんな感じに書いていたのだがTooltip.Triggerが内部的に<button>を使っている様で結果的に<button>タグの中に<button>タグとなってしまっていた。
回避するには、TriggerにasChildを付与する。
<Tooltip.Trigger asChild>
<button>
hoge
</button>
</Tooltip.Trigger>
https://www.radix-ui.com/primitives/docs/components/tooltip#trigger リンク先に書いている通り、propsとしてasChildを渡せる。
asChildの詳細についてはこちら。
