用 react-context 包装 App 组件后的空白屏幕

Question

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

Answer 1

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;