I am writing the context API and everything is working fine but when I wrapped the App component with the context screen became blank
Code of contex
import { useState } from "react";
import { createContext, useContext } from "react";
const chatContext = createContext();
const ChatContext = ({ childern }) => {
const [user, setuser] = useState();
return (
<chatContext.Provider value={{ user, setuser }}>
{childern}
</chatContext.Provider>
);
};
export const ChatState = () => {
return useContext(chatContext);
};
export default ChatContext;
code of index.js before wrapping contex
ReactDOM.render(
<React.StrictMode>
<Router>
<App />
</Router>
</React.StrictMode>,
document.getElementById("root")
);
** code after wrapping context api **
import ChatContext from "./Context/ChatContext";
ReactDOM.render(
<ChatContext>
<Router>
<App />
</Router>
</ChatContext>,
document.getElementById("root")
);
but the screen becomes blank anyone how can help me.
I tried to solve this problem but can not able to do so. plz anyone how can help me will be appricated
i think you just misspelled children you wrote childern and if you fix how you wrote it the problem will be solved
const ChatContext = ({ *childern* children }) => {
const [user, setuser] = useState();
return (
<chatContext.Provider value={{ user, setuser }}>
{*childern* children}
</chatContext.Provider>
);
};
export const ChatState = () => {
return useContext(chatContext);
};
export default ChatContext;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.