How to fix MyContext.Provider requires a value prop in React

import { createContext } from 'react';

const MyContext = createContext();

function MyProvider({ children }) {
  // Define the value to be shared
  const contextValue = {
    user: 'John',
    isLoggedIn: true
  };

  // CORRECT: Provider includes value prop
  return (
    <MyContext.Provider value={contextValue}>
      {children}
    </MyContext.Provider>
  );
}

import { createContext, useMemo } from 'react';

const MyContext = createContext();

function MyProvider({ children }) {
  const [user, setUser] = useState(null);

  // Memoize the context value to maintain stable reference
  const contextValue = useMemo(() => ({
    user,
    setUser
  }), [user]);

  return (
    <MyContext.Provider value={contextValue}>
      {children}
    </MyContext.Provider>
  );
}

import { createContext, useContext } from 'react';

const MyContext = createContext(undefined);

// Custom hook that throws if context is undefined
function useMyContext() {
  const context = useContext(MyContext);

  if (context === undefined) {
    throw new Error('useMyContext must be used within a MyProvider');
  }

  return context;
}

// Usage in components
function MyComponent() {
  const { user } = useMyContext(); // Throws clear error if no provider
  return <div>{user.name}</div>;
}

// CORRECT: Provider wraps all consumers
function App() {
  return (
    <MyProvider>
      <Header />
      <Content />
      <Footer />
    </MyProvider>
  );
}

// INCORRECT: Some consumers outside provider
function App() {
  return (
    <>
      <Header /> {/* Cannot access context */}
      <MyProvider>
        <Content /> {/* Can access context */}
      </MyProvider>
      <Footer /> {/* Cannot access context */}
    </>
  );
}