Not declared context error using context hook in react with next.js

Question

just asking for some help with this basic implementation with hooks. I am currently working with Next.js and want to set a context in the _app.js file in order to make it available to the entire component tree.

import React from "react";

function MyApp({ Component, pageProps }) {
  const dataContext = React.createContext()
  return (
    <dataContext.Provider value = 'just some text'>
      <Component {...pageProps} />
    </dataContext.Provider>
  )
}
export default MyApp

Then in the index.js, add the component loginForm.js with the following code:

import React from "react";

function LoginForm (props) {

  const info = React.useContext(dataContext)
  const onSubmit = () => console.log(info)

return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <button type="submit">click here</button>
   </form>
)
}

now in the console, I receive an error that says "dataContext is not declared"

Apparently, the context exists -

This is so simple that I don't even know how to tackle the issue, any help would be greatly appreciated.

You have to access the same instance of dataContext that's been declared in the _app. Try exporting it where you're declaring it export const DataContext = React.createContext(); then import and use it in the LoginForm component: import { DataContext } from '<path-to/pages/_app' & const info = React.useContext(DataContext). Have a read through the official docs. — juliomalves
– juliomalves, Commented Nov 8, 2021 at 18:03

Yilmaz · Accepted Answer · 2021-11-10 01:07:28Z

1

What is dataContext in index.js?

 const info = React.useContext(dataContext)

I think you forgot to import the context

answered Nov 10, 2021 at 1:07

Yilmaz

51k19 gold badges226 silver badges278 bronze badges

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

Comments

Danziger · Accepted Answer · 2021-11-08 01:13:35Z

0

Move React.createContext() outside the component:

import React from "react";

const DataContext = React.createContext();

function MyApp({ Component, pageProps }) {
  return (
    <DataContext.Provider value="just some text">
      <Component { ...pageProps } />
    </DataContext.Provider>
  );
}

export default MyApp;

edited Nov 8, 2021 at 1:13

answered Nov 8, 2021 at 0:38

Danziger

21.4k6 gold badges59 silver badges91 bronze badges

3 Comments

Cristian Diaz Over a year ago

Thanks a lot for your help, unfortunately, the error persists.

Danziger Over a year ago

@CristianDiaz Are you on the latest Next.js version? It might be related to this: github.com/vercel/next.js/issues/18090

Cristian Diaz Over a year ago

Yes, I am working with Next v12.0.1, not sure if it is related to that issue, since in the description they receive an "undefined" value, in my case, it is basically that the context hook is not connecting to the context provider as if I were using a wrong name or if the context was set in another branch in the component tree, it does not appear to be the case. The most upsetting side is that this is not even something complex, it makes me feel so dumb.

some-user · Accepted Answer · 2022-09-30 06:23:36Z

0

let d = useMyContextHook()
const draw = d ? d.draw : null

This fixed it for me

edited Sep 30, 2022 at 6:23

some-user

5,0306 gold badges26 silver badges56 bronze badges

answered Sep 27, 2022 at 6:47

rhys jones

1

1 Comment

Yunnosch Over a year ago

Welcome to Stack Overflow! While this code may solve the question, including an explanation of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please edit your answer to add explanations and give an indication of what limitations and assumptions apply.

Collectives™ on Stack Overflow

Not declared context error using context hook in react with next.js

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related