Consume Context API ( With useContext Hook )

With useContext Hook

ကျတော်တို့ ခုနက consumer ဆိုတဲ့ node နဲ့ context api တွေကို အသုံးပြုပြီးတော့ data တွေကို

လက်ခံလိုက်ကြတယ်မလား ဒီတစ်ခါ ကျတော့ ကျတော်တို့က useContext ဆိုတဲ့ ဟာလေးကိုအသုံးပြု ပြီးတော့

data တွေကို အသုံးပြုကြပါမယ်

ဘာလို့ ကျတော်က consume လုပ်တာကိုပဲပြောရတာလည်းဆိုတော့ အပေါ်က အဆင့်တွေက

အကုန်အတူတူ တွေပါပဲ အဓိက ကွာသွားတဲ့ အရာက ကျတော်တို့ consume လုပ်တဲ့နေရာမှာပဲ ကွာသွားတာပါ

Hook ကိုအသုံးပြုလိုက်တဲ့အတွက် ကျတော်တို့အတွက် က တော်တော်လေးကို လွယ်ကူသွားပါတယ်

ကဲ ကျတော်တို့ စလိုက်ကြရအောင်ဗျ

အရင်ဆုံး ကျတော်တို့ useContext ကို import လုပ်လိုက်ပါမယ်

import { useContext } from 'react'

Import လုပ်ပြီးသွားတဲ့အခါကျရင် ကျတော်တို့က ခုနက context တွေကို consume လုပ်ပါမယ်

ဘယ်လိုမျိုးလုပ်ရမှာလည်းဆိုတော့

import { NameContext , AgeContext } from '../../../App'
import { useContext } from 'react'

export default function GrandChild () {
    const name = useContext(NameContext)
    const age = useContext(AgeContext)
    return(
        <h1> My name is {name} and age is {age}</h1>
    )
}

ကျတော်တို့ က useContext hook ရဲ့ parenthesis ထဲမှာ ခုနက import လုပ်ခဲ့တဲ့ context တွေကို

ထည့်ပေးလိုက်တဲ့အခါကျရင်ကျတော်တို့ ခုနက provide လုပ်ခဲ့တဲ့ value တွေကို သူက

return ပြန်ပေး လာပါတယ် အဲဒါကို ကျတော်တို့က variable တွေနဲ့ သိမ်းပြီးတော့ အဲဒါကို

render လုပ်ပေးလိုက်ရုံပါပဲ ဗျ

ဒီလောက်ဆိုရင် ကျတော်တို့ context api တွေကိုအသုံးပြုသွားနိုင်မယ်လို့ထင်ပါတယ်