Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
Context API proporciona una forma de compartir datos entre componentes sin pasar props manualmente a todos los niveles.
Nuestro objeto Provider se encargará de hacer visible el objeto que le pasemos para todos los componentes anidados en él.
El provider sólo puede utilizar la prop value para determinar la información que va a ser almacenada. Por tanto, si queremos almacenar varios valores, lo que haremos será usar un objeto con múltiples propiedades.
./src/App.jsx
import MyProvider from './app/providers/MyStateProvider';
import ShowState from './pages/Showstate';
import Login from './pages/Login';
const App = () => (
<MyProvider>
<Login />
<ShowState />
</MyProvider>
);
export default App;./src/app/providers/MyStateProvider.jsx
import {createContext, useState, useContext} from 'react';
export const AppContext = createContext();
export const useMyContext = () => useContext(AppContext);
const MyStateProvider = ({ children }) =>{
const [state,setState] = useState({});
return (
<AppContext.Provider value={[state,setState]}>
{children}
</AppContext.Provider>
);
}
export default MyStateProvider;./src/components/Login.jsx
import {useContext} from 'react';
import {useMyContext} from '../app/providers/MyStateProvider';
const Login = () =>{
const [state,setState] = useMyContext();
return( <input type="text" onChange={ (e) => {setState({ ...state, name:e.target.value})}} />
);
}
export default Login;./src/components/Showstate.jsx
import { useContext } from 'react';
import { useMyContext} from '../app/providers/MyStateProvider';
const Showstate = () => {
const [state, setState] = useMyContext();
return ( <p>{state.name}</p> );
}
export default Showstate;Añadiendo lógica al Provider
Es posible añadir métodos específicos para gestionar el contexto.
const CartContext = ({ children }) => {
const [items, setItems] = useState([]);
const addItem = (newItem, quantity) => {
!items.find(item => item.id === newItem.id) && setItems([...items, { ...newItem, quantity }]);
};
const removeItem = id => setItems(items.filter(item => item.id !== id));
const clear = () => setItems([]);
const isInCart = (id) => items.find(item => item.id === id) ? true : false;
return (
<AppContext.Provider value={{items, addItem, removeItem, clear, isInCart}}>
{children}
</AppContext.Provider>
);
}Para acceder a estos datos, utilizaré la deconstrucción de un objeto:
const { items, addItem, removeItem, clear } = useContext(AppContext);