When I wrap the index.js with my context provider I just see a blank page

Question

When I wrap the index.js with my context provider I just see a blank page.

this is my context

import React, { createContext, Fragment, useState } from 'react';

const FavoriteContext = createContext({
  favorites: [],
  addFav: (favoriteCar) => {},
  removeFav: (carId) => {},
  carIsFav: (carId) => {},
});

export const FavoriteCarsProvider = (props) => {
  const [userFavorites, setUserFavorites] = useState([]);

  const addFavoriteHandler = (favoriteCar) => {
    setUserFavorites((prevFav) => {
      return prevFav.concat(favoriteCar);
    });
  };

  const removeFavoriteHandler = (carId) => {
    setUserFavorites((prevFav) => {
      return prevFav.filter((car) => car.id !== carId);
    });
  };

  const carIsFavHandler = (carId) => {
    userFavorites.some((car) => car.id === carId);
  };

  const favoritesValue = {
    favorites: userFavorites,
    addFav: addFavoriteHandler,
    removeFav: removeFavoriteHandler,
    carIsFav: carIsFavHandler,
  };

  return (
    <FavoriteContext.Provider value={favoritesValue}>
      <Fragment>{props.childen}</Fragment>
    </FavoriteContext.Provider>
  );
};

export default FavoriteContext;

when I wrap my provider in index.js I see a blank page.

and this is my index.js where I use my wrapper context provider.

import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
import { FavoriteCarsProvider } from './components/favorites/Favorite-context';

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <FavoriteCarsProvider>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </FavoriteCarsProvider>
);

I got no error on the console. Just a blank page

Answer 1

You have a typo in the return of your Provider that is causing this.

return (
    <FavoriteContext.Provider value={favoritesValue}>
      <Fragment>{props.childen}</Fragment> // <- typo here, should be children.
    </FavoriteContext.Provider>
  );

Replace props.childen for props.children and you will be able to see your page.