CODEWITHSUNDEEP
javascriptreactjsreact-hooksnext.jsreact-context
Cristian Diaz
Cristian Diaz

Reputation: 395

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

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.

Upvotes: 1

Views: 2580

Answers (3)

rhys jones
rhys jones

Reputation: 1

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

This fixed it for me

Upvotes: 0

Yilmaz
Yilmaz

Reputation: 49182

What is dataContext in index.js?

 const info = React.useContext(dataContext)

I think you forgot to import the context

Upvotes: 1

Danziger
Danziger

Reputation: 21161

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;

Upvotes: 0

Related Questions