¿Cómo compartir el estado entre React Components con context?

En una aplicación pequeña, React Context junto con useState es la mejor manera de compartir el estado o simplemente pasar datos entre componentes sin mutarlos.

Contexto: proporciona una forma de compartir valores entre componentes sin tener que pasar explícitamente un apoyo a través de cada nivel del árbol.

React useState Hook : Es un Hook que te permite tener variables de estado en componentes funcionales. Pasa el estado inicial a esta función y devuelve una variable con el valor del estado actual (no necesariamente el estado inicial) y otra función para actualizar este valor.

Ejemplo: programa para demostrar el contexto React con el enlace useState. En este ejemplo, tenemos dos botones para aumentar y disminuir para cambiar la variable de conteo y un botón para pasar a otra página y ver el valor de conteo actualizado.

Creando la aplicación React:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app example

Paso 2: después de crear la carpeta de su proyecto, es decir, ejemplo, muévase a ella con el siguiente comando:

cd example

Estructura del proyecto: Se verá así:

Aquí ComponentTwo está anidado dentro de ComponentOne y ComponentOne está anidado dentro de PageOne. Queremos cambiar la variable de conteo en ComponentTwo.js y pasar los datos para ver el valor actualizado en el archivo PageTwo.js. Entonces, sin pasar los datos a través de prop manualmente, vamos a crear la variable globalmente con la ayuda de useContext y useState.

Pasos para demostrar el ejemplo anterior:

Paso 1: Creación de contexto Cree el contexto utilizando el método createContext().

Sintaxis:

const Context = React.createContext();

Paso 2: Crear un conjunto de datos

Ahora tenemos un conjunto de datos que necesitamos almacenar globalmente para que se pueda acceder a ellos a través de cualquier componente. Entonces, en el archivo Context.js , escriba el siguiente código:

import React, { useState } from "react";
  
export const Context = React.createContext();
export const ContextProvider = ({ children }) => {
    const [items, setItems] = useState(0);
  
    return (
        <Context.Provider value={{ items, setItems }}>
            {children}
        </Context.Provider>
    );
};

En este código, los datos se crean usando el enlace useState y On Context. Proveedor, ponemos el valor que queremos pasar a todo nuestro árbol de componentes. Lo establecemos igual al valor prop para hacerlo. En este caso value={{items,setItems}}.

Paso 3: Envolviendo el componente de la aplicación.

Antes de intentar acceder al valor de contexto en nuestro proyecto, envuelva el archivo app.js con el archivo Context.Provider. Vaya al archivo index.js en su proyecto y escriba el siguiente código:

import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { ContextProvider } from './Context';
  
ReactDOM.render(<ContextProvider><App /></ContextProvider>,
document.getElementById('root'));

Paso 4: Acceso y actualización del contexto

Ahora cualquier componente del proyecto tiene acceso para actualizar y usar una variable global. Para usar el Contexto en un componente secundario, debemos acceder a él mediante UseContext Hooks.

import React, { useContext } from "react";
import { useNavigate } from "react-router-dom";
import { Context } from "../Context";
  
function ComponentTwo() {
    const navigate = useNavigate();
    const { items, setItems } = useContext(Context);
      
    const clickHandler = () => {
        setItems((prevcount) => prevcount + 1);
    };
      
    const clickHandlerOne = () => {
        setItems((prevcount) => prevcount - 1);
    };
      
    const HandlerOne = () => {
        navigate("/pagetwo");
    };
      
    return (
        <div>
            <button onClick={clickHandler}>Increase</button>
            Count:{items}
            <button onClick={clickHandlerOne}>Decrease</button>
            <div>
                <button onClick={HandlerOne}>Move to Page Two</button>
            </div>
        </div>
    );
}
  
export default ComponentTwo;

Paso 6: Acceda a la variable desde el otro componente.

import React, { useContext } from "react";
import { useNavigate } from "react-router-dom";
import { Context } from "../Context";
  
function PageTwo() {
    const navigate = useNavigate();
    const { items, setItems } = useContext(Context);
    const handlertwo = () => {
        navigate("/");
    };
      
    return (
        <div>
            <h2>Welcome to Page Two</h2>
            Updated new value Count:<b>{items}</b>
            <div>
                <button onClick={handlertwo}>Move to Page One</button>
            </div>
        </div>
    );
}
  
export default PageTwo;

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import PageTwo from "./pages/PageTwo";
import PageOne from "./pages/PageOne";
  
function App() {
    return (
        <div>
            <Router>
                <Routes>
                    <Route exact path="/" element={<PageOne />} />
                    <Route exact path="/pagetwo" element={<PageTwo />} />
                </Routes>
            </Router>
        </div>
    );
}
  
export default App;

Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando:

npm start

Salida: Ahora, abra la URL http://localhost:3000/, verá la siguiente salida.

Conclusión: una forma simple y extensible de compartir datos a través de componentes secundarios anidados sin pasar ningún estado o accesorios de datos al componente secundario, utilizando React Context y Hooks.