【React】Warning: validateDOMNesting(...): <h2> cannot appear as a child of <h2>.の対処法【JavaScript】

症状

Reactでstyled-componentを使用した際に、以下、のWranが出てしまいました。 翻訳すると、「警告：validateDOMNesting（...）：< h2 >は< h2 >の子として表示できません」と翻訳されました

Warning: validateDOMNesting(...): <h2> cannot appear as a child of <h2>.

該当のソースは以下です。

Hoge.jsx

import React from "react";
import styled from "styled-components";

const HogeWrapper = styled.h2`
`;

const HogeNameWrapper= styled.h2`
`;

ewport const = () => {
  const hogeName = "HogeName";

  return (
    <HogeWrapper>
      <HogeNameWrapper>{hogeName}</HogeNameWrapper>
    </HogeWrapper>
  )
}

解決方法

h2の外側のh2をdivにしたら、解決しました。 h2の要素な中に、h2要素を入れてしまったため、このようなエラーが出てしまったようです。

通常のタグの使用方法と同様で、styled-componentsでも文字を装飾するようなタグの中にタグを入れるのは推奨されていないようです。

Hoge.jsx

import React from "react";
import styled from "styled-components";

const HogeWrapper = styled.div`
`;

const HogeNameWrapper= styled.h2`
`;

ewport const = () => {
  const hogeName = "HogeName";

  return (
    <HogeWrapper>
      <HogeNameWrapper>{hogeName}</HogeNameWrapper>
    </HogeWrapper>
  )
}