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> }}