👻

このエラーの解決方法 Warning : <div> cannot appear as a descendant of <p>

2022/02/26に公開

今回出現したエラー文

Consoleに、以下のようなエラー文が出力された。

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

原因を特定して、解決していきましょう！

まずは、エラー文をちゃんと読む。

でも英語は読めないので翻訳。

<div>は<p>の子孫として表示できません

ん？どういうことだ？？？

日本語の意味がよくわからん。。

この記事を見てみよう！

この記事を読んだ結果、HTMLにはコンテンツモデルという概念があることがわかった。

先ほどのエラー文は、「HTMLの入れ子のルール」に反していることで怒られているエラーの可能性が高い。

今回の場合、pタグの中にdivタグを入れ子にしているからWarningエラーが起きているのかも。

pタグの中にdivタグを、入れ子にすることはできないので、divタグの中にpタグを入れるようにすればこのエラーを解決できるかも？

Reactを使用している場合は関数コンポーネントの
returnでJSXを返している箇所のコードを確認すればいい。

なので、まずは以下のようなHTMLの構成になっていないか確認を行う。

const Sample = () => {
  return (
   <p>
     <div>pタグにdivは入れられない</div>
   </p>
 )
}

もし、上記のような構成になっていたら、以下のようにHTMLの構成を変更してあげればOKそう。

const Sample = () => {
  return (
   <div>
     <p>divタグにpタグは入れられる</p>
   </div>
 )
}

結果、自分はこの流れで解決できました！！

なので、上記フローで同じように対応を行えば、このエラーは同じように解決できるはずです！

HTML5から「ブロック要素」と「インライン要素」という概念が廃止されて、入れ子のルールが「コンテンツモデル」という概念で決まるようになったからです。

コンテンツモデルとは「その要素にはどのカテゴリーのコンテンツを入れていいか」を決めているルールのことで、タグの入れ子のルールは全てこの「コンテンツモデル」で決まっています

だからpタグの中にdivタグを入れると「あなたの書いたコードはコンテンツモデル的におかしいよ。なので警告出しとくから直してね」というWarningエラーが出たんですね。Reactは優しい！

この話題に関する詳しい説明は
この記事が非常にわかりやすいです。

暇な時に軽く目を通しておくと
HTMLをより深く理解できるのでおすすめです！