How to set a value with useContext()? - reactjs

Question

I am trying to set my state in Context from within a nested child component, but it doesn't see my method, which I created in the context provider:
import React, { createContext, useState } from "react"
const Context = createContext({})
const Provider = ({ children }) => {
const [value, setValue] = useState(undefined)
return (
<Context.Provider
value={{
value,
loadValue: currentValue => {
setValue(currentValue)
},
}}
>
{children}
</Context.Provider>
)
}
export default Context
export { Provider }
In my child component I try to set it like so:
import React, { useContext } from "react"
import Context from "../context/value.context"
const MyPage = ({ data }) => {
const value = data.contentfulValue
const { loadValue } = useContext(Context)
loadValue(value)
return (
<Layout>
...
</Layout>
)
}
export default MyPage
export const valueQuery = graphql`
query valueBySlug($slug: String!) {
contentfulValue(slug: { eq: $slug }) {
...
}
}
`
The error I'm getting is TypeError: loadValue is not a function

Answer 1

While you not providing the entire app structure,
you may encounter such error when MyPage is not a child of Context.Provider,
therefore it suggested to add an initial value when creating the context:
The defaultValue argument is only used when a component does not have a matching Provider above it in the tree. This can be helpful for testing components in isolation without wrapping them. Note: passing undefined as a Provider value does not cause consuming components to use defaultValue.
const Context = createContext({ value: undefined, loadValue: () => console.log('Default function') })

Answer 2

I have Changed your code a little bit
export context as named so that you can use it
import React, { createContext, useState } from "react"
export const Context = createContext({})
export default const Provider = ({ children }) => {
const [value, setValue] = useState(undefined)
return (
<Context.Provider
value={{
value,
loadValue: currentValue => {
setValue(currentValue)
},
}}
>
{children}
</Context.Provider>
)
}
Use static context like following.
import React, { useContext } from "react"
import {Context} from "../context/value.context"
const MyPage = ({ data }) => {
static contextType = Context
const value = data.contentfulValue
const { loadValue } = this.context
loadValue(value)
return (
<Layout>
...
</Layout>
)
}
export default MyPage
And Remember to import Provider at the topmost of the component tree so that any component can use it, like this
<Provider>
{/* <PageContent> */}
<Navbar />
<Forms />
{/* </PageContent> */}
</Provider>
if still doesn't work do tell me.