Why is the value not shown in react context?

Question

Not sure why react context is not using the value passed in provider?

import { createContext } from "react";

const initialState = {
  isOpen: false
};

export const alertContext = createContext(initialState);

export default (props) => {
  return (
    <>
      <alertContext.Provider value={{ isOpen: true }}>
        {props.children}
      </alertContext.Provider>
    </>
  );
};

import "./styles.css";
import { useContext } from "react";
import AlertProvider, { alertContext } from "./AlertProvider";

export default function App() {
  let value = useContext(alertContext);
  return (
    <div className="App">
      <AlertProvider>
        <pre>{JSON.stringify(value)}</pre>
      </AlertProvider>
    </div>
  );
}

Why is the value for isOpen not true? https://codesandbox.io/s/serene-faraday-1oib3?fontsize=14&hidenavigation=1&theme=dark

Answer 1

You need to wrap your provider around App in index.js

as shown:

import { StrictMode } from "react";
import ReactDOM from "react-dom";
import AlertProvider from "./AlertProvider";

import App from "./App";

    const rootElement = document.getElementById("root");
    ReactDOM.render(
      <StrictMode>
        <AlertProvider>
        <App />
        </AlertProvider>
      </StrictMode>,
      rootElement
    );

and your app.js will look like this:

import "./styles.css";
import { useContext } from "react";
import  { alertContext } from "./AlertProvider";

export default function App() {
  let value = useContext(alertContext);
  return (
    <div className="App">
      
        <pre>{JSON.stringify(value)}</pre>
     
    </div>
  );
}