React Context not working despite following exact instructions.
Answered
Persian posted this in #help-forum
PersianOP
Context js:
Layout.jsx:
"use client";
import { createContext, useState, useContext } from "react";
const AppContext = createContext();
export function AppWrapper({ children }) {
const [AppData, setAppData] = useState({
cookie: "",
assignment: { id: "", question: "", expectation: "" },
});
<AppContext.Provider value={{ AppData, setAppData }}>
{children}
</AppContext.Provider>;
}
export function useAppContext() {
return useContext(AppContext);
}Layout.jsx:
import { Inter } from "next/font/google";
import "./globals.css";
import { AppWrapper } from "@/app/context/AppContext";
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<AppWrapper>
<body className={inter.className}>{children}</body>
</AppWrapper>
</html>
);
}Answered by @ts-ignore
the page is blank because you forgot
return in your Context.js6 Replies
PersianOP
Error:
The following tags are missing in the Root Layout: <body>.If I move the wrapper inside the
body tag the whole page is blank because children does not work.PersianOP
Please ping me while replying
in
AppWrapper@@ts-ignore the page is blank because you forgot `return` in your `Context.js`
PersianOP
Oh Sorry, I made a silly mistake it seems.