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

react-bootstrapでこのエラーに遭遇して対処法を調べたのですが日本語の記事が少なくて解決に時間がかかったのでメモとして残しておきます。

エラーの原因

コンソールには以下のエラーが出力されます

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

原因がわからずググってみたら、このサイトによると<div>タグを<p>タグでラップしているとこのエラーが起こるようです。 しかし、<p>タグを使っている箇所がない、、、

解決策

原因となっていたのは以下のコードでした

              <Card.Text>
              <Row style={{ clear: "both" }}>
                <SelectButton 
                  isSelected={selectedPictureList.includes(picture)}
                  target={picture}
                  selectedFunc={selectPicture}
                  unselectedFunc={unselectPicture}
                />
                <PicturesCommentNewContainer pictureId={picture.id} />
              </Row>

              </Card.Text>

こちらのサイトによると、<Card.text>の出力は<p>タグになってしまうそうです。
その中のコンテナ(PicturesCommentNewContainer)でdivタグを返す処理をしていたので、エラーが起こっていたみたいですね...

              <Row style={{ clear: "both" }}>
                <SelectButton 
                  isSelected={selectedPictureList.includes(picture)}
                  target={picture}
                  selectedFunc={selectPicture}
                  unselectedFunc={unselectPicture}
                />
                <PicturesCommentNewContainer pictureId={picture.id} />
              </Row>

このように、単純に<Card.Text>を使わなければエラーは無事なくなりました
bootstrapめんどい！

※この記事はqiitaから転載したものです