getting problem on using useContext in react?

Question

I have a simple react app in which i have to use useContext.

(btw im using vite + react)

here is my code for Context.jsx

import React, {useContext} from 'react';

const emailContext = React.createContext();

export const useEmail = () => useContext(emailContext);

export const emailProvider = ({children}) => {
  const currentUser = "None";

  const value = {
    currentUser
  }

  return(
    <emailContext.Provider value={value}>
      {children}
      </emailContext.Provider>
  )
}

and heres how i am using the context

import "./styles.css";
import { useEmail } from "./Context/Context"

export default function App() {

  const {currentUser} = useEmail();

  return (
    <div className="App">
      <h1>Hello CodeSandbox {currentUser}</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

I am sure why I am getting error in this code.

some of the errors that I am getting

_useEmail is undefined (latest)
currentUser user is undefined

thing i have tried

Initialized createContext with some initial value (only intial value is visible).
using useContext() directy in the App.js (useContext(emailContext) return undefined)
instead of {children} used <children/>.
used useState instead of const currentUser in emailProvider

I am getting same problem even when I use typescript.

but none of the above helped.

I have read some implemetation on the same for global state management with context api you can check it out. Provides a detailed look on the global state. Here is the link Similar implementation — Felix Orinda
– Felix Orinda, Commented Nov 8, 2021 at 4:10

Nguyên Nguyễn Viết · Accepted Answer · 2021-07-16 07:23:28Z

0

You should wrapping app with <emailProvider></emailProvider> to using data in value={value}. Now it gets undefined from const emailContext = React.createContext();

edited Jul 16, 2021 at 7:23

answered Jul 16, 2021 at 7:13

Nguyên Nguyễn Viết

163 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ritik Ranjan Over a year ago

export default function App() {   var value  = useEmail();   console.log(value)    return (     <div className="App">       <EmailProvider>         <h1>Hello CodeSandbox</h1>         <h2>Start editing to see some magic happen!</h2>       </EmailProvider>     </div>   ); }

Even after this the code is not working, If place value.currentUser in the inside the EmailProvider component it will throw an error

Chibuokem Onyekwelu Feb 4 at 19:07

var value = useEmail(); should be inside a component that's wrapped with the emailProvider

Nithin - Techidiots · Accepted Answer · 2021-07-16 07:32:36Z

0

Below code may help you analyse the flow , also check link for more details https://medium.com/technofunnel/usecontext-in-react-hooks-aa9a60b8a461

use useContext in receiving end

 import React, { useState } from "react";

var userDetailContext = React.createContext(null);

export default function UserDetailsComponent() {
  var [userDetails] = useState({
    name: "Mayank",
    age: 30
  });

  return (
    <userDetailContext.Provider value={userDetails}>
      <h1>This is the Parent Component</h1>
      <hr />
      <ChildComponent userDetails={userDetails} />
    </userDetailContext.Provider>
  );
}

function ChildComponent(props) {
  return (
    <div>
      <h2>This is Child Component</h2>
      <hr />
      <SubChildComponent />
    </div>
  );
}

function SubChildComponent(props) {
  var contextData = React.useContext(userDetailContext);
  return (
    <div>
      <h3>This is Sub Child Component</h3>
      <h4>User Name: {contextData.name}</h4>
      <h4>User Age: {contextData.age}</h4>
    </div>
  );
}

answered Jul 16, 2021 at 7:32

Nithin - Techidiots

1036 bronze badges

1 Comment

Ritik Ranjan Over a year ago

On same file it working, but if the files are different it is not working. Also, I have to pass components dynamically. For the medium page, I cannot view it because it requires subscription.

Aliston Gomes · Accepted Answer · 2024-02-01 21:23:31Z

0

in index.js/main.js file

<emailProvider/> <App/> <emailProvider>

this helped me

edited Feb 1, 2024 at 21:23

answered Feb 1, 2024 at 21:23

Aliston Gomes

11 bronze badge

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

getting problem on using useContext in react?

I have a simple react app in which i have to use useContext.

some of the errors that I am getting

I am getting same problem even when I use typescript.

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

I have a simple react app in which i have to use useContext.

some of the errors that I am getting

I am getting same problem even when I use typescript.

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related