Introduction to the Context API

First, create the context object using the createContext function:

import { createContext } from 'react';

const ColorContext = createContext();

Next, create a component that displays the user’s favorite color using the useContext hook:

import { useContext } from 'react';
import { ColorContext } from './ColorContext';

function FavoriteColor() {
  const { color } = useContext(ColorContext);

  return (
    <div>Your favorite color is: {color}</div>
  );
}

Finally, wrap the FavoriteColor component in a Context.Provider component and pass the user’s favorite color as the value prop:

import { ColorContext } from './ColorContext';

function App() {
  return (
    <ColorContext.Provider value={{ color: 'blue' }}>
      <FavoriteColor />
    </ColorContext.Provider>
  );
}

First, create the context object using the createContext function:

import { createContext } from 'react';

const ItemContext = createContext();

Next, create a reducer function that handles updates to the list of items:

function itemReducer(state, action) {
  switch (action.type) {
    case 'ADD_ITEM':
      return [...state, action.item];
    case 'REMOVE_ITEM':
      return state.filter(i => i !== action.item);
    default:
      return state;
  }
}

Then, create a component that allows the user to add items to the list using the useReducer hook:

import { useReducer } from 'react';
import { ItemContext } from './ItemContext';

function AddItem() {
  const [items, dispatch] = useReducer(itemReducer, []);

  function handleSubmit(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    const item = formData.get('item');
    dispatch({ type: 'ADD_ITEM', item });
  }

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="item">Item:</label>
      <input type="text" name="item" />
      <button type="submit">Add Item</button>
    </form>
  );
}

Finally, wrap the AddItem component in a Context.Provider component and pass the items and dispatch function as the value prop:

import { ItemContext } from './ItemContext';

function App() {
  return (
    <ItemContext.Provider value={{ items, dispatch }}>
      <AddItem />
    </ItemContext.Provider>
  );
}

First, create the context object using the createContext function:

import { createContext } from 'react';

const LoginContext = createContext();

Next, create a component that displays a login form using the useContext and useState hooks:

import { useContext, useState } from 'react';
import { LoginContext } from './LoginContext';

function LoginForm() {
  const { login, setLogin } = useContext(LoginContext);
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  function handleSubmit(event) {
    event.preventDefault();
    setLogin(true);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="username">Username:</label>
      <input type="text" name="username" value={username} onChange={event => setUsername(event.target.value)} />
      <label htmlFor="password">Password:</label>
      <input type="password" name="password" value={password} onChange={event => setPassword(event.target.value)} />
      <button type="submit">Log In</button>
    </form>
  );
}

Finally, wrap the LoginForm component in a Context.Provider component and pass the login status and setLogin function as the value prop:

import { LoginContext } from './LoginContext';

function App() {
  const [login, setLogin] = useState(false);

  return (
    <LoginContext.Provider value={{ login, setLogin }}>
      <LoginForm />
    </LoginContext.Provider>
  );
}

First, create the context object using the createContext function:

import { createContext } from 'react';

const LanguageContext = createContext();

Next, create a reducer function that handles updates to the user’s language preference:

function languageReducer(state, action) {
  switch (action.type) {
    case 'SET_LANGUAGE':
      return action.language;
    default:
      return state;
  }
}

Then, create a component that displays a language selection form using the useContext and useReducer hooks:

import { useContext, useReducer } from 'react';
import { LanguageContext } from './LanguageContext';

function LanguageSelector() {
  const [language, dispatch] = useReducer(languageReducer, 'english');

  function handleChange(event) {
    dispatch({ type: 'SET_LANGUAGE', language: event.target.value });
  }

  return (
    <form>
      <label htmlFor="language">Language:</label>
      <select name="language" value={language} onChange={handleChange}>
        <option value="english">English</option>
        <option value="french">French</option>
        <option value="spanish">Spanish</option>
      </select>
    </form>
  );
}

Finally, wrap the LanguageSelector component in a Context.Provider component and pass the language and dispatch function as the value prop:

import { LanguageContext } from './LanguageContext';

function App() {
  const [language, dispatch] = useReducer(languageReducer, 'english');

  return (
    <LanguageContext.Provider value={{ language, dispatch }}>
      <LanguageSelector />
    </LanguageContext.Provider>
  );
}

First, create the context object using the createContext function:

import { createContext } from 'react';

const ThemeContext = createContext();

Next, create a component that displays a theme toggle button using the useContext and useState hooks:

import { useContext, useState } from 'react';
import { ThemeContext } from './ThemeContext';

function ThemeToggle() {
  const { theme, setTheme } = useContext(ThemeContext);

  function handleClick() {
    setTheme(theme === 'light' ? 'dark' : 'light');
  }

  return (
    <button onClick={handleClick}>Toggle Theme</button>
  );
}

Finally, wrap the ThemeToggle component in a Context.Provider component and pass the theme and setTheme functions as the value prop:

import { ThemeContext } from './ThemeContext';

function App() {
  const [theme, setTheme] = useState('light');

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