Consume Context API ( With Consumer method)

With Consumer method

ကျတော်တို့က consume လုပ်တဲ့အခါမှာ method က ၂မျိုးရှိတယ်ဗျ ပထမ တခုက တော့ ကျတော်တို့က

callback function နဲ့ consume လုပ်တာပါ

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

အရင်ဆုံး ကျတော်တို့က အသုံးပြုမယ့် component ထဲမှာ ခုနက app component ထဲ က

export လုပ်ခဲ့တဲ့ context ကို import လုပ်ပေးရမှာပါ

import { NameContext } from '../../../App'

အဲလိုမျိုး import လုပ်ပြီးရင် ကျတော်တို့ code လေးတွေကို ဒီလိုရေးလိုက်ပါမယ်

import { NameContext } from '../../../App'

export default function GrandChild () {
    return(
        <NameContext.Consumer>
            {(name) => {
                return (
                    <h1>{name}</h1>
                )}
            }
        </NameContext.Consumer>
    )
}

ဒီလိုလေးရေးပြီးသွားရင်ကျတော် code လေးတွေကို အရင်ဆုံးရှင်းပြပေးပါမယ်

အရင်ဆုံး ကျတော်တို့က import လုပ်ထားတဲ့ context ထဲမှာ ပါလာတဲ့ consumer ကိုအသုံးပြုလိုက်ပါတယ်

သူတို့ရဲ့ child node နေရာမှာ ကျတော်တို့က callback function တခုကိုရေးပြီးတော့ return ပြန်လိုက်ပါတယ်

ဒီအချိန်မှာ ကျတော်တို့က callback function ရဲ့ parameter နေရာမှာ app component ကနေပြီးတော့

ပေးလိုက်တဲ့ data တွေကို ကျတော်တို့ လက်ခံပြီးတော့ အသုံးပြုရပါတယ်

parameter လက်ခံတာကတော့ ကြိုက်တဲ့ နာမည်နဲ့ လက်ခံလို့ရပါတယ်

ကျတော်က တော့ name ကိုပေးလိုက်တာဖြစ်တော့ name နဲ့ လက်ခံလိုက်တာ ပါ

အဲလိုလက်ခံပြီးတော့ ကျတော်တို့က ပြန်အသုံးပြုလို့ရသွားပါပြီ ဗျ ဒီလောက်ဆိုရင်တော့ ကျတော်တို့

နားလည်မယ်လို့ထင်ပါတယ်

ကျတော်တို့က context ထဲမှာ နောက်ထပ် context တခုရှိ လာတဲ့အခါမှာ ရောဘယ်လိုမျိုး အသုံးပြုလို့ရမလဲပေါ့

အဲလိုမျိုး ဆိုရင်ကျတော်တို့က ထုံးစံအတိုင်း ဟိုးအစက အဆင့်တွေအတိုင်း တဆင့်စီပြန်လုပ်သွားရမှာပါ

code လေးတွေကို တော့ ကျတော်ရေးပြထားလိုက်ပါမယ်

ပထမအဆင့်

export const NameContext = createContext()
export const AgeContext = createContext()

ဒုတိယအဆင့်

//rest of code of App.jsx
<NameContext.Provider value="Bate Thar">
    <AgeContext.Provider value={27}>
        <Component />
    <AgeContext.Provider>
<NameContext.Provider>

Consuming အဆင့်

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

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

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

အခုက ကျတော်က ဒီအတိုင်း number နဲ့ string တွေပဲ ပေးလိုက်တာ ပါ

ကျတော်တို့က state တွေဖြစ်တဲ့ state နဲ့ setState တွေကိုရော provide လုပ်ပြီးတော့

data passing လုပ်ပေးလို့ရပါတယ် ဒီလောက်ဆိုရင်တော့ နားလည်သွားမယ်ထင်ပါတယ်