How to fix Warning:validateDOMNesting(...): <body> cannot appear as a child of <div>. at body at Header

Question

Tried many solutions found online but none of them worked, my body was actually not in <div> already tried to put <Header /> into <React.Fragment> also not help. Honestly don't get what's wrong

My index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import Header from "./Header";

ReactDOM.render(
  <React.StrictMode>
      <Header />
  </React.StrictMode>,
  document.getElementById("root"),
);

My Header.js

function Header() {
  return (
    <body className="leading-none ">
      <header>
        <section className="bg-black">
          <div className="m-auto flex-wrap py-3 flex justify-between max-w-6xl   header-top-container px-3.5 text-neutral-50">
            <div className="header-top-left">
              <span className="text-xs font-normal inline-block h-4 pt-1 pr-6 mr-5 pl-5 ">
                Магазин в центре Киева
              </span>
              <span className="text-xs font-normal inline-block h-4 pt-1 pr-6 mr-5 pl-5 pl-4    ">
                <a href="tel:123456">+38 067 314 16 11</a>
              </span>
              <span className="text-xs font-normal inline-block h-4 pt-1 pr-6 mr-5 pl-6 ">
                Поки що приймаємо лише онлайн замовлення.
              </span>
            </div>
            <div className="header-top-right relative self-start  "></div>
            <div className="text-xs header-btn-login pr-6 mr-5 inline-block align-top">
              <a href="lgn">Вход</a>
            </div>
          </div>
        </section>
        <section className="bg-white container-white uppercase">
          <div className="flex justify-between ">
            <img width="95px" height="55px" src="snkr.jpg" alt="logo" />
            <h6>Бренды</h6>
            <h6>Новинки</h6>
            <h6>Обувь</h6>
            <h6>Одежда</h6>
            <h6>Скейтбординг</h6>
            <div className="headerCartBlock pr-1 float-right">
              <div className=" inline-block mr-5 pt-0.5  align-top tracking-wide">
                <a href="/">Избранное</a>
              </div>
              <div className="inline-block align-top tracking-wide">
                <a href="/">Корзина</a>
              </div>
            </div>
          </div>
        </section>
      </header>
    </body>
  );
}

export default Header;

i expect to to fix the warning message

Answer 1

You have wrapped your element in body tag. Unwrap it by removing body element from Header.js and error will be gone.

How to fix Warning:validateDOMNesting(...): <body> cannot appear as a child of <div>. at body at Header

Question

1 answers

solution1
0 2022-03-21 21:57:22

How to fix Warning:validateDOMNesting(...): <body> cannot appear as a child of <div>. at body at Header

Question

1 answers

solution1 0 2022-03-21 21:57:22

solution1
0 2022-03-21 21:57:22