How to fix Context value is undefined but context consumer expects a value in React

import { createContext, useContext } from 'react';

const ThemeContext = createContext(undefined);

// ❌ WRONG: Consumer not wrapped by Provider
function App() {
  return (
    <div>
      <ThemeButton /> {/* This will get undefined */}
    </div>
  );
}

// ✅ CORRECT: Consumer wrapped by Provider
function App() {
  return (
    <ThemeContext.Provider value={{ theme: 'dark' }}>
      <ThemeButton /> {/* This will receive the value */}
    </ThemeContext.Provider>
  );
}

function ThemeButton() {
  const theme = useContext(ThemeContext);
  // theme will be undefined in the wrong example
  return <button>{theme?.theme}</button>;
}

import { createContext, useState } from 'react';

const UserContext = createContext(undefined);

// ❌ WRONG: Missing value prop
function App() {
  const [user, setUser] = useState({ name: 'John' });
  return (
    <UserContext.Provider> {/* No value prop! */}
      <UserProfile />
    </UserContext.Provider>
  );
}

// ✅ CORRECT: value prop provided
function App() {
  const [user, setUser] = useState({ name: 'John' });
  return (
    <UserContext.Provider value={{ user, setUser }}>
      <UserProfile />
    </UserContext.Provider>
  );
}

import { createContext, useContext, ReactNode } from 'react';

type ThemeContextType = {
  theme: 'light' | 'dark';
  toggleTheme: () => void;
};

const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

// Custom hook with validation
export function useTheme() {
  const context = useContext(ThemeContext);
  if (context === undefined) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  return context;
}

// Provider component
export function ThemeProvider({ children }: { children: ReactNode }) {
  const [theme, setTheme] = useState<'light' | 'dark'>('light');

  const toggleTheme = () => {
    setTheme(prev => prev === 'light' ? 'dark' : 'light');
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

// Usage
function MyComponent() {
  const { theme, toggleTheme } = useTheme(); // Will throw clear error if outside provider
  return <button onClick={toggleTheme}>Current: {theme}</button>;
}

// ❌ WRONG: undefined default with no validation
const SettingsContext = createContext(undefined);

// ✅ BETTER: Meaningful default value
const SettingsContext = createContext({
  fontSize: 'medium',
  colorMode: 'light',
  updateSettings: () => {
    console.warn('SettingsProvider not found, using default context');
  }
});

// ✅ BEST: Combine default with custom hook validation
const SettingsContext = createContext<SettingsContextType | undefined>(undefined);

function useSettings() {
  const context = useContext(SettingsContext);
  if (context === undefined) {
    throw new Error('useSettings must be used within SettingsProvider');
  }
  return context;
}

import { createContext, useContext, useEffect, useState, ReactNode } from 'react';

type User = { id: string; name: string; };
type AuthContextType = {
  user: User | null;
  loading: boolean;
};

const AuthContext = createContext<AuthContextType | undefined>(undefined);

export function AuthProvider({ children }: { children: ReactNode }) {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Simulate async auth check
    fetchCurrentUser()
      .then(setUser)
      .finally(() => setLoading(false));
  }, []);

  return (
    <AuthContext.Provider value={{ user, loading }}>
      {children}
    </AuthContext.Provider>
  );
}

export function useAuth() {
  const context = useContext(AuthContext);
  if (context === undefined) {
    throw new Error('useAuth must be used within AuthProvider');
  }
  return context;
}

// Usage
function UserProfile() {
  const { user, loading } = useAuth();

  if (loading) return <div>Loading...</div>;
  if (!user) return <div>Not logged in</div>;

  return <div>Welcome, {user.name}</div>;
}