Así es como se ve mi código:
Contexto.js:
const Context = createContext(); export default Context;ContextProvider.js:
import Context from './Context'; const ContextProvider = () => { .... return(<Context.Provider value={data: 1}>{props.children}</Context.Provider> }ParentClass.js:
const ParentClass = () => { ... return( <div> ... {boolValue ? ( <ContextProvider> <ConsumerComponent/> </ContextProvider>) </div>) }ConsumerComponent.js:
import Context from './Context.js'; const ConsumerComponent = () => { const contextData = useContext(Context); ... } Mi problema es que ConsumerComponent no parece poder acceder a los datos de contexto; no se procesa en absoluto cuando agrego const contextData = useContext(Context); línea, y no se registra nada cuando intento imprimir contextData . ¿Dónde exactamente me equivoqué? Según tengo entendido, seguí los pasos necesarios para crear un contexto + un proveedor, asegurándome de que el componente consumidor tenga un proveedor como uno de sus componentes principales y luego accediendo al contexto con useContext().
Teniendo en cuenta que desea que la propiedad de valor del proveedor de contexto sea un objeto como
{ data : 1 }probablemente olvidó las llaves adicionales, porque el primer par es la sintaxis JSX para interpretar el contenido como JavaScript en lugar de una cadena.
Entonces, su propuesta de valor en el archivo ContextProvider.js probablemente debería verse así:
<Context.Provider value={{data: 1}}>{props.children}</Context.Provider>