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.

Answer 1

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;

Answer 2

What is dataContext in index.js?

 const info = React.useContext(dataContext)

I think you forgot to import the context

Answer 3

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

This fixed it for me