Estoy tratando de importar el valor de useContext pero recibo este error:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
¿Qué me estoy perdiendo aquí?
AllThemeContext.js
import React, { createContext, useState } from "react"; export const AllContext = createContext(); const AllContextProvider = (props) => { const submittedInput = props.submittedInput; return ( <AllContext.Provider value={{ submittedInput }}> {props.children} </AllContext.Provider> ); }; export default AllContextProvider;
logotipo.js
import React from "react"; import AllContextProvider from "../context/AllThemeContext"; import "./Logo.scss"; // Component const Logo = () => { return ( <AllContextProvider.Consumer> {(context) => { console.log(context); }} </AllContextProvider.Consumer> ); }; export default Logo;
Debe importar AllContext
desde AllThemeContext
que es la exportación con nombre y no la exportación predeterminada.
import React from "react"; import { AllContext } from "../context/AllThemeContext"; import "./Logo.scss"; // Component const Logo = () => { return ( <AllContext.Consumer> {(context) => { console.log(context); }} </AllContext.Consumer> ); }; export default Logo;
Porque no devuelve nada en los elementos secundarios de AllContextProvider.Consumer
.
Necesitas agregar un componente de retorno:
{(context) => { console.log(context); return <div>Hello world</div> }}