Ejercicio: Compartir estado: elevar y Context

Objetivo

Compartir un tema entre componentes lejanos con Context, un proveedor propio y un hook.

Cómo se trabaja

Escribe un componente llamado App (puedes crear los demás que necesites). Prueba tu código en el editor de abajo; cuando funcione, pega todo el archivo en el comprobador. Los import de react se aceptan y se ignoran, porque aquí React ya está cargado.

Pasos

Marca cada paso a medida que lo completes. Tu avance se guarda en este navegador.

• Crea un contexto TemaContext y un componente TemaProvider con un estado tema ("claro" al inicio) y una función alternar.
• Crea un hook useTema() que devuelva { tema, alternar } leyendo el contexto.
• Crea el componente Etiqueta, que muestre <p className="etiqueta">Tema: claro</p> (el tema actual).
• Crea el componente Interruptor, con un botón «Cambiar tema» que llame a alternar.
• En App, envuelve todo en <TemaProvider> y coloca un <main className="app claro"> cuyo nombre de clase cambie con el tema (app oscuro cuando sea oscuro).

import { createContext, useContext, useState } from "react";

const TemaContext = createContext(null);

function TemaProvider({ children }) {
  const [tema, setTema] = useState("claro");
  const alternar = () => setTema((t) => (t === "claro" ? "oscuro" : "claro"));
  return <TemaContext.Provider value={{ tema, alternar }}>{children}</TemaContext.Provider>;
}

function useTema() {
  return useContext(TemaContext);
}

function Etiqueta() {
  const { tema } = useTema();
  return <p className="etiqueta">Tema: {tema}</p>;
}

function Interruptor() {
  const { alternar } = useTema();
  return <button onClick={alternar}>Cambiar tema</button>;
}

function Pantalla() {
  const { tema } = useTema();
  return (
    <main className={"app " + tema}>
      <Etiqueta />
      <Interruptor />
    </main>
  );
}

export default function App() {
  return (
    <TemaProvider>
      <Pantalla />
    </TemaProvider>
  );
}