why do the context value assigned to default value?

Question

why do the context value assigned to default value despite of using value prop in provider?? here is when I created the context:

export let exchangeContext=React.createContext();

I created provider in the same component

 <exchangeContext.Provider value={"aya"}>  </exchangeContext.Provider>

and when I console log the value in the consumer i get undefined as the default value

 <exchangeContext.Consumer>
       {(value)=>{
         console.log(value)

Answer 1

You don't have to write consumer if you used context (writing consumer is the old way before useContext hook was a thing)

In your consumer file do this

import { exchangeContext } from './App' // wherever the main context is

then in your function body

const value = React.useContext(exchangeContext)

then in your return body

return <>{value}</>

see: https://reactjs.org/docs/hooks-reference.html#usecontext for more info