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

Reactを書いていたら以下のようなWarningエラーが
Consoleに出たので備忘録として残しておく

今回出現したエラー文

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

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

エラー文をDeepLで翻訳すると・・・

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

ん？どういうこと？

エラーの原因

先ほどのエラー文は
「HTMLの入れ子のルール」に関するエラー

今回は、pタグの中にdivタグを
入れ子にしているからWarningエラーが起きています

pタグの中にdivタグを
入れ子にすることはできないからです

解決方法

Reactの場合は関数コンポーネントの
returnでJSXを返している箇所のコードを見て

以下のような
HTMLの構成になっていないか確認する

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

もしこのような構成になっているコードを確認したら
以下のようにHTMLの構成を変更してあげればOKです！

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

これで解決できるはずです！

ところで、なぜpタグにdivタグは入れられないのか？

この質問に対する回答としては

HTML5から「ブロック要素」と「インライン要素」
という概念が廃止されて

入れ子のルールが「コンテンツモデル」
という概念で決まるようになったからです

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

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

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

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