Blank Page Issue When Using useContext in React

Question

I am developing an e-commerce website using DRF and React and I want to pass order data as a context to all components in my app. When I wrap the OrderProvider around my components in index.js, I get a blank page. However, if I don't wrap the OrderProvider, I can't access the order data.

OrderProvider.js

import React, { useEffect } from "react";
import { useState} from "react";
import { createContext } from "react";
import axios from "axios";
import { BASE_URL } from "../components/Cart";

const OrderContext=createContext("");
export default OrderContext;

  
export const OrderProvider=({children})=>{
  const [orderBook,setOrderBook]=useState([]);
const [order,setOrder]=useState(""); 
  
function getCookie(name) {
      let cookieValue = null;
      if (document.cookie && document.cookie !== '') {
          const cookies = document.cookie.split(';');
          for (let i = 0; i < cookies.length; i++) {
              const cookie = cookies[i].trim();
              // Does this cookie string begin with the name we want?
              if (cookie.substring(0, name.length + 1) === (name + '=')) {
                  cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                  break;
              }
          }
      }
      return cookieValue;
    }
const csrftoken = getCookie('csrftoken');

const GetOrder = async ()=>{
        try{
          let response =await axios.get(`${BASE_URL}`,{
            headers:{
                "X-CSRFToken":csrftoken
            }
          });
          // setOrderBook(response.data[0])
          // setOrder(response.data[1])
          setOrder(response.data[0]);
          console.log("response form ordercontext component : ",response.data[0]);
      
         
        }
        catch(error){
          console.log(error);
        }
        
      };

useEffect(()=>{
GetOrder();
console.log("Order from Order Context");
},[])


const context={
  order:order
};

    return(
        <OrderContext.Provider value={context}></OrderContext.Provider>
    );
};

index.js

import ReactDOM from 'react-dom/client';
import {  BrowserRouter, BrowserRouter as Router} from "react-router-dom";
import App from './App';
import OrderContext, { OrderProvider } from './context/orderContext';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(

  <Router>
<OrderProvider>
    <App />
</OrderProvider>
    </Router>

);

App.js

import React from "react";
import { Route,Routes } from "react-router-dom";

import Home from "./components/Home";
import AuthPage from "./components/authPage";
import Cart from "./components/Cart";
import Checkout from "./components/checkout";
import BookDetails from "./components/Book-details";
import { OrderProvider } from "./context/orderContext";
function App() {
  
  return (
   
   
   <Routes>

    <Route path="/" element={<Home/>}/>
    <Route path="/auth" element={<AuthPage/>}/>
    <Route path="/cart" element={<Cart/>}/>
    <Route path="/checkout" element={<Checkout/>}/>
      <Route path="/book-details" element={<BookDetails/>}/>
   </Routes>
  
  );
}

export default App;

BookDetail.js

import React, { useContext, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import OrderContext from '../context/orderContext';
import { Button } from 'reactstrap';

function BookDetails() {
  const navigate = useNavigate();
  const [bookDetails, setBookDetails] = useState("");
  const { order } = useContext(OrderContext);

  return (
    <>
      {/* <Header/> */}
      <Button onClick={() => {
        console.log("Got order from Order Context:", order);
      }}>
        Get Order
      </Button>
    </>
  );
}

export default BookDetails;

Why does this happen and how can I fix it?

Answer 1

you need to pass the children

return <OrderContext.Provider value={context}>{children}</OrderContext.Provider>