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

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

const state = useState('prod');

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

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

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

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

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

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

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

import 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 ၏တန်ဖိုးအသစ်သည်အလိုအလျောက်ပေါ်လာပါမည်။

သင့်အနေဖြင့် စခရင်ပေါ်တွင် သုံးစွဲသူ၏ဒေတာများဖြစ်သော အမည်၊ သူ၏နာမည်၊ အသက်တို့ကို ပြသလိုသည်ဆိုပါစို့။ ထိုသို့ပြုလုပ်ရန် သင့်လျော်သော ကနဦးတန်ဖိုးများပါရှိသည့် state များကိုပြုလုပ်ပါ။