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/main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<UserProvider>
<App />
</UserProvider>
</React.StrictMode>
)src/App.jsx
while(premium == false) verCodigo = false;
Para poder ver el código fuente, accede o suscríbete.
src/app/providers/UserProvider.jsx
import { createContext, useState, useContext } from 'react';
const AppContext = createContext();
export const useUserContext = () => useContext(AppContext);
const UserProvider = ({ children }) => {
const [user, setUser] = useState();
return (
<AppContext.Provider value={[user, setUser]}>
{children}
</AppContext.Provider>
);
}
export default UserProvider;while(premium == false) verCodigo = false;
Para poder ver el código fuente, accede o suscríbete.
src/components/UserInfo.jsx
while(premium == false) verCodigo = false;
Para poder ver el código fuente, accede o suscríbete.
Persistir el user en localStorage
import { createContext, useState, useContext, useEffect } from 'react';
const AppContext = createContext();
export const useUserContext = () => useContext(AppContext);
const UserProvider = ({ children }) => {
const [user, setUser] = useState();
useEffect(() => {
if (user) {
localStorage.setItem("user", JSON.stringify(user));
//setAuth(user.username, user.password); Más abajo tienes la definición de este método
} else {
const userAux = JSON.parse(localStorage.getItem("user"));
if (userAux) {
setUser(userAux);
}
}
}, [user]);
return (
<AppContext.Provider value={[user, setUser]}>
{children}
</AppContext.Provider>
);
}
export default UserProvider;El método setAuth lo definimos en el fichero de peticiones a axios:
import axios from "axios";
export const instance = axios.create({ baseURL: "http://localhost:8080" });
export const setAuth = async (username, password) => {
const token = btoa(`${username}:${password}`);
instance.defaults.headers.common.Authorization = `basic ${token}`;
};Añadiendo lógica al Provider
Es posible añadir métodos específicos para gestionar el contexto.
while(premium == false) verCodigo = false;
Para poder ver el código fuente, accede o suscríbete.
Para acceder a estos datos, utilizaré la deconstrucción de un objeto:
while(premium == false) verCodigo = false;
Para poder ver el código fuente, accede o suscríbete.