# Conditional Rendering

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

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

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

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

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

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

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

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

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

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

```jsx
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 လုပ်သင့်မသင့်ကို&#x20;

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

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

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

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

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

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

ဒီမှာသွားလေ့လာပါ [Link](https://javascript.info/ifelse)

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

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

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

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