• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

162
Views
error when I import useContext to another component

I am trying to import the value of useContext but I am getting this 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.

What I am missing here ?

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;

logo.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;
almost 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

You should import AllContext from AllThemeContext which is the named export and not the default export.

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;
almost 3 years ago · Juan Pablo Isaza Report

0

Because you don't return anything in the children of AllContextProvider.Consumer.

You need add return component:

  {(context) => {
    console.log(context);
    return <div>Hello world</div>
  }}
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error