Digamos que he declarado tener el siguiente contexto:
const ColorContext = React.createContext(“”)Estoy tratando de crear una función simple que pueda cambiar el valor del contexto, que luego se puede usar en varios otros componentes como una variable de estado global. Sin embargo, la función que he implementado no hace nada para cambiar el valor del contexto, esto es lo que he hecho, no dude en hacerme saber dónde me estoy equivocando en el código:
function GlobalContext(){ const {color, setColor} = useContext(ColorContext); const toGreen = () => { setColor('green'); }; return( <> <ColorContext.Provider value={{color, setColor}}> <button onClick={toGreen}> Change Color </button> <ColorContext.Provider/> </> ) }Lo estás haciendo mal. useContext es para uso en componentes más bajos en el árbol que el proveedor de contexto. Lo que desea en el componente que representa su Context.Provider es esto:
const [color, setColor] = useState();Así que todo se vería así:
const ColorContext = React.createContext(); const MyColorContextProvider = ({children}) => { const [color, setColor] = useState(); const toGreen = () => setColor('green'); return ( <ColorContext.Provider value={{color,setColor}}> {children} <button onClick={toGreen}>Change to Green</button> </ColorContext.Provider> ); }y entonces:
const MyChildComponent = () => { const {color} = useContext(ColorContext); return <>The color in context is {color}</> }tu aplicación podría ser:
const App = () => { return ( <MyColorContextProvider> <MyChildComponent/> </MyColorContextProvider> ); }Stackblitz: https://stackblitz.com/edit/react-gym2ku?file=src%2FColorContextProvider.js