it raises this error
Error
here is the Layout.tsx
import React, { ReactNode } from "react";
import HeaderComponent from "./headerComponent";
type ChildrenType = {
children: ReactNode;
className?: string;
};
const LayoutComponent: React.FC<ChildrenType> = ({ children, className }) => {
return (
<div className="min-h-screen bg-black text-center">
<HeaderComponent />
<main className={`flex-grow flex flex-col ${className}`}>{children}</main>
this renders
</div>
);
};
export default LayoutComponent;
here is the Home/Index.tsx
import LayoutComponent from "@/components/layouts/layouts";
import React from "react";
const Index = () => {
return (
<LayoutComponent>
<h2>This doesnt</h2>
</LayoutComponent>
);
};
export default Index;
Fast reload doesnt work
i tried to rm -rf the .nextjs but it doesnt work , and i have to rerun npm run dev
so it reloads the childern component, but in the layout.tsx outside the {childern} props it re renders automatically.