States in Class Component

ကျတော်တို့ ခုနက props ကိုလေ့လာပြီးပြီဆိုတော့ ကျတော်တို့ အမြဲလိုလို ကြားကြားနေရမယ့်အရာတခုကို

လေ့လာလိုက်ကြရအောင် အဲဒါကဘာလည်းဆိုတော့ ခေါင်းစဉ်မှာပြောထားတဲ့အတိုင်းပါပဲ State တွေ ပါပဲ

သူက react application တခုမှာ တော်တော်လေး အရေးကြီးတဲ့ အခန်း ကဏ္ဍ တခုအနေနဲ့ပါပါတယ်

ဘာလို့ဆို ကျ‌တော်တို့က state တွေကို အသုံးပြုပြီးတော့ react application တစ်ခုလုံးကို စိတ်ကြိုက် လိုသလို

လုပ်နိုင် လို့ပါ သူ့မှာက ကျတော်တို့ က state တွေကို မြင်သာအောင်ပြောရင် get set လုပ်တာပါပဲ အဲအတွက်

သူက value နဲ့ method ဆိုပီးတော့ ထုတ်ပြီးတော့ အလုပ်လုပ်စေတာပါ

အဲဒါဆို ကျတော်တို့အရင်ဆုံးလေ့လာလိုက်ကြရအောင်ဗျ အရင်ဆုံး ကျတော်က state ကို

class component မှာ အသုံးပြုပြပါမယ် code လေးတွေကို တချက်ရေးလိုက်ကြရအောင်

import { Component } from 'react'
class Child extends Component {
    constructor(props){
    super(props)
    this.state = {
    count : 0
    }
}
    render(){
        return(
            <h1>{this.state.count}</h1>
        )
    }
}
export default Child

ကျတော်တို့ ဒီမှာ သတိပြုရမှာက ကျတော်တို့က class component ထဲမှာဆိုရင် state တစ်ခုက

object type အနေနဲ့ရှိနေတာပါပဲ

အဲလိုမျိုးရေးပြီးတော့ ကျတော်တို့က state ကို browser ပေါ်မှာ သူက render ချပြီးတော့ အလုပ်လုပ် ခိုင်းလို့ရပါပြီ

ပြီးရင်တော့ ကျတော်တို့ နောက်တဆင့် ထပ်ပြီးတော့ တက်လိုက်ရအောင် အဲဒါက ဘာလည်းဆိုတော့

ကျတော်တို့ state ကို changes လေး လုပ်ကြရအောင် အဲလိုမျိုး changes လုပ်ဖို့အတွက်ဆိုရင် သူက

ဘယ်လိုမျိုး ရေးရမလဲဆိုတော့ ကျတော်တို့က button လေး နိပ်လိုက်တဲ့အချိန်မှာ state ထဲက count ကို

၁ တိုးသွားအောင်ရေးကြမှာပေါ့ အဲလိုဆိုရင်ကျတော်တို့ က h1 tag ရဲ့ အောက်မှာ button ဆိုတဲ့ tag

လေးကို ရေးလိုက်ကြရအောင်

import { Component } from 'react'
class Child extends Component {
    constructor(props) {
        super(props)
        this.state = {
        count : 0
        }
    }
        render () {
        return(
            <h1>{this.state.count}</h1>
            <button>Add One</button>
        )
    }
}
export default Child

ကျတော်တို့ အဲလိုရေးလိုက်တဲ့အခါမှာ error stage လေး ဖြစ်သွားတာကိုမြင်ရလိမ့်မယ်

ဘာလို့အဲလိုဖြစ်ရတာလည်းဆိုတာကို ကျတော်တို့ browser ကို တချက်လောက်သွားကြည့်လိုက်ရအောင်

သွားကြည့်တော့ browser မှာ ဘာတွေတွေ့ရမလဲဆိုတော့

error

ဒီလိုလေးတွေ့ရပါလိမ့်မယ်

အဲမှာ သူက ရေးထားတာက ဘာလည်းဆိုတော့ JSX element တွေက

must be wrapped in enclosing tag

တဲ့ ပြောချင်တာက ကျတော်တို့ return function ထဲမှာ ပြန်ရမယ့် html တွေက tag တခုတည်းဖြစ်နေရမှာပါတဲ့

သူက html tag ၂ခု ဖြစ်သွားတာဖြစ်တဲ့အတွက် သူက အဲဒါကို နားမလည်နိုင်တော့ဘူး

ပြောရရင်သူက node ( html tag ) တစ်ခုတည်းကိုပဲ သိတယ်ပေါ့

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

div tag နဲ့ အုပ်မယ်ဆိုလည်းရပါတယ်

ပြီးတော့ နောက်တစ်ခုရှိပါသေးတယ် ကျတော်တို့က react မှာ သုံးနေတာဖြစ်တဲ့အတွက်

fragment tag ( <> </> ) အဲလိုမျိုးလေးနဲ့လည်းရပါတယ်

div tag နဲ့ fragment tag ၂ခု က ဘာကွာလည်းပေါ့ div က ကျတော့ ကျတော်တို့ browser ပေါ်မှာ render

ချတဲ့အခါမှာ div တွေ ထည့်ပေးသွားမှာပါ fragment က ကျတော့ ဘာမှမပါသွားပါဘူး အခုနောက်ပိုင်းက

fragment ကိုပဲ တော်တော်အသုံးများလာကြပါတယ်

ကဲ ဒါဆိုရင်ကျတော်တို့ ခုနက state ကို changes လေး ဆက်လုပ်လိုက်ကြရအောင်

အဲလိုမျိုးရေးပြီး သွားရင်ကျတော်တို့က button ထဲမှာ event ကို handle လုပ်ကြရအောင်