React တွင် State များအသုံးပြုခြင်း

ထုတ်ကုန်အမည်ပါဝင်သော state တစ်ခုဖန်တီးရန် useState လုပ်ဆောင်ချက်ကို အသုံးပြုပါမည်:

jsxconst state = useState('prod');

ရလဒ်အနေဖြင့် state constant သည် array တစ်ခုကိုကိုယ်စားပြုပါမည်။ ၎င်း၏ပထမအပိုင်းတွင် ထုတ်ကုန်အမည်ကိုသိမ်းဆည်းထားပြီး၊ ဒုတိယအပိုင်းတွင် အမည်ပြောင်းလဲရန်လုပ်ဆောင်ချက်ပါရှိပါမည်:

jsxconst state   = useState('prod');
const name    = state[0];
const setName = state[1];

အကျဉ်းချုပ်အနေဖြင့် array အတွက် အကြားခံ constant ကို မသုံးဘဲ၊ destructuring ကို အသုံးပြုလေ့ရှိပါသည်:

jsxconst [name, setName] = useState('prod');

ယခုကျွန်ုပ်တို့၏ ထုတ်ကုန်အမည် state ကို မည်သည့် markup ထဲမဆို ပြသကြည့်ပါစို့:

jsxreturn <p>
  <span>{name}</span>
</p>;

အားလုံးကိုစုစည်းပြီး အောက်ပါကုဒ်ကိုရရှိပါမည်:

jsximport React, { useState } from 'react';

function App() {
  const [name, setName] = useState('prod');
  
  return <div>
    <span>{name}</span>
  </div>;
}

export default App;

ဤကုဒ်ကိုအလုပ်လုပ်လိုက်ပါက၊ ကနဦးအနေဖြင့် div အတွင်း၌ state ၏ ကနဦးတန်ဖိုးကိုပြသပေးပါမည်။ ကျွန်ုပ်တို့၏ကိစ္စတွင် 'prod' ဖြစ်ပါသည်။ setName လုပ်ဆောင်ချက်မှတစ်ဆင့် state ပြောင်းလဲသောအခါ markup ထဲတွင်လည်း state ၏တန်ဖိုးအသစ်သည်အလိုအလျောက်ပေါ်လာပါမည်။