Conditional Rendering

ကျတော်တို့ react ရဲ့ rendering ထဲမှာ နောက်ထပ် ထပ်လေ့လာရမယ့် rendering တမျိုးက တော့

Conditional rendering ပါပဲ ဘာလို့အဲဒါကို ကျတော်တို့ လေ့လာဖို့လိုတာလည်းဆိုတော့ ကျတော်တို့ က

logic တွေကို ရေးတဲ့အခါမှာ condition တွေက အရေးပါပါတယ် အဲအတွက်ကြောင့် ကျတော်တို့က condition

အပေါ် မူတည်ပြီးတော့ render ပြပေးရတဲ့ သဘောမျိုး ရေးပေးကြရပါတယ်

ဥပမာ user တယောက်က login မဝင်ထားဘူးဆိုရင် ကျတော်တို့ ကသူနဲ့ပတ်သက်တဲ့အကြောင်းအရာတွေ ကို

ဝင်ကြည့်ခွင့်မရဘူးတခြားအကြောင်းအရာတွေကို ပြင်ဆင်ခွင့်မရဘူး အဲလိုမျိုး သဘောတရားတွေကို

ကျတော်တို့က condition တွေနဲ့ စစ်ပြီးတော့ လိုအပ်တဲ့ ဒေတာတွေကို render ချပေးတဲ့အရာမျိုးကို ပြောချင်တာပါ

ကျတော်တို့ ကုဒ်လေးတွေကိုမရေးသေးခင်မှာ ဘာတွေသိထားဖို့လိုမလဲဆိုတော့

Javascript ရဲ့ condition စစ်တဲ့ ဟာလေးတွေကို သိဖို့လိုပါမယ်

ကျတော်တို့ code ရေးလိုက်ကြရအောင်

import { Component } from 'react'

class ConditionalRendering extends Component {
    constructor(){
        super()
        this.state = {
            sayHello : false
        }
    }
    render(){
        return(
            <div>Conditional Rendering </div>
        )
    }
}
export default ConditionalRendering

ကျတော်တို့ အခုလက်ရှိမြင်ရမှာက state တခုကို ဖန်တီးထားတာကိုမြင်ရပါလိမ့်မယ်

ကျတော်တို့က အဲ state (boolean) အပေါ်မူတည်ပီးတော့ ကျတော်တို့က render လုပ်သင့်မသင့်ကို

ဆုံးဖြတ်ပေးမှာပါ ကုဒ်လေးကို နောက်ထပ် ရေးလိုက်ကြရအောင်

return(
    <div>
        {this.state.sayHello ? <h1>Hello</h1> : <h1>Hi</h1>}
    </div>
)

အဲလိုလေးရေးလိုက်တဲ့အခါမှာ ကျတော်တို့က ဘယ်လိုမျိုးမြင်ရမှာလည်းဆိုတော့ hi ဆိုတာလေးကိုမြင်

နေရမှာပါ ဘာလို့လည်းဆိုတော့ ကျတော်တို့က this.state.sayHello ရဲ့ value က false လို့ပေးထားလို့ ပါ ပဲ

ကုဒ်ကိုကြည့်ရင်(ternary operator ကို သိတဲ့သူဆိုရင်တော့) နားလည်သွားမှာပါ

တကယ်လို့ ternary operator ကို မသိဘူးဆိုရင်တော့

ဒီမှာသွားလေ့လာပါ Link

ဒီလောက်ဆိုရင်တော့ ကျတော်တို့ conditional render အကြောင်းကို နားလည်သွားလောက်ပီလို့ ထင်ပါတယ်

ကျတော်တို့က conditional render ကိုအသုံးပြုပြီးတော့ login ဝင်ထားတာလား မဝင်ထားဘူးလား ဆိုတာမျိုးကို

စစ်ပြီးတော့ render လုပ်ပေးတဲ့ logic လိုမျိုးကိုရေးလို့ရပါတယ်

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