1. Establecer el estado principal para el contexto dinámico

En primer lugar, para tener un contexto dinámico que se pueda pasar a los consumidores, usaré el estado del padre. Esto asegura que tengo una única fuente de verdad. Por ejemplo, mi aplicación principal se verá así:

 const App = () => { const [name, setName] = useState("John"); const value = { name, setName }; return ( ... ); };

El nombre se almacena en el estado. Pasaremos tanto el nombre como la función de establecimiento setName a través del contexto más adelante.

2. Crear un contexto

A continuación, creé un contexto de nombre como este:

 // set the defaults const NameContext = React.createContext({ name: "John", setName: () => {} });

Aquí estoy configurando los valores predeterminados para el nombre ('John') y una función setName que será enviada por el proveedor de contexto a los consumidores. Estos son solo valores predeterminados y proporcionaré sus valores cuando use el componente de proveedor en la aplicación principal.

3. Crear un consumidor de contexto

Para que el conmutador de nombres establezca el nombre y también se muestre, debe tener acceso a la función de establecimiento de nombres a través del contexto. Puede verse algo como esto:

 const NameSwitcher = () => { const { name, setName } = useContext(NameContext); return ( <label>Your name:</label><br /> <input type='text' onChange={e => setName(e.target.value)} /> <p>{name}</p> ); };

Aquí solo estoy configurando el nombre para el valor de entrada, pero es posible que tenga su propia lógica para establecer el nombre para esto.

4. Envolver al consumidor en un proveedor

Ahora presentaré mi componente de cambio de nombre en un NameContext.Provider y pasaré los valores que deben enviarse a través del contexto a cualquier nivel más profundo. Así es como se ve mi aplicación principal:

 const App = () => { const [name, setName] = useState("John"); const value = { name, setName }; return ( <Name.Provider value={value}> <NameSwitcher /> </Name.Provider> ); };

Debe exportar su UserContext, para que pueda importarse en los componentes que lo necesitan:

 export const UserContext = React.createContext(); function App() { const [name, setName] = useState('Name'); return ( <UserContext.Provider value={{ name, setName }}> <Home /> </UserContext.Provider> ); }

Luego puede importarlo en el componente de su aplicación:

 import { UserContext } '../../App' function Home() { const user = useContext(UserContext); return ( <> <label>Your name:</label> <input type='text' onChange={e => user.setName(e.target.value)} /> <p>{user.name}</p> </> ) }