Practice: State & Navigation Challenges

စိတ်လျှော့ပါ။ ဒီခန်းကို စာအုပ်လိုမဟုတ်ဘဲ စကားပြောသလိုပဲ၊ နားလည်လွယ်အောင် ရှင်းပါမယ်။

ဒီခန်းပြီးရင် ဘာတတ်သွားမလဲ

Practice: State & Navigation Challenges ကို ကြောက်စရာမလိုအောင် နားလည်မယ်
ကိုယ်တိုင် code ရေးပြီး Expo Go ပေါ်မှာ run ကြည့်တတ်မယ်
Real app project ထဲမှာ ဒီ concept ကို ချက်ချင်း အသုံးချတတ်မယ်

ခဏလေး ဒီလိုပဲ စဉ်းစားကြည့်

ဒီ practice set က difficulty ပိုမြင့်ပါတယ် — state management, side effect, navigation ကို တစ်ခါတည်း ပေါင်းသုံးရမယ့် task များပါ။

လက်တွေ့ scenario နဲ့ ချိတ်ကြည့်မယ်

Task ၃ ခု — (1) Counter with limit: useState ဖြင့် counter ဆောက်ပါ, count 10 ရောက်ရင် '+' button ကို disabled ဖြစ်အောင် logic ထည့်ပါ, (2) Search + Navigation: TextInput နဲ့ product name search, filtered result ကို FlatList ဖြင့်ပြပြီး item press ရင် Detail screen navigate, (3) Multi-screen form: Screen A မှာ name ရိုက်, 'Next' ဖြင့် Screen B ကူးပြီး navigation.navigate('ScreenB', { name }) ဖြင့် data pass, Screen B မှာ route.params.name ကို ပြပါ။

Task 1: Counter with disabled-at-limit logic
Task 2: Search + filter + navigate to detail
Task 3: Multi-screen navigation with route params data-passing

Code နမူနာ

javascript

// Task 3 hint — passing data via route params
navigation.navigate('ScreenB', { name: inputValue });

// In ScreenB:
function ScreenB({ route }) {
  const { name } = route.params;
  return <Text>Hello, {name}!</Text>;
}

You should see

Task ၃ ခုစလုံးအတွက် interactive, navigable screen ပြီးမြောက်မည်။

၅ မိနစ် စမ်းကြည့်

Task ၃ ခုကို ကိုယ်တိုင် implement လုပ်ကြည့်ပါ — Task 3 (route params) က ခက်ဆုံးဖြစ်နိုင်လို့ React Navigation lesson ကို ပြန်ကြည့်ရင်လည်း ရပါတယ်။

သတိလေးတစ်ချက်

Task 3 ရဲ့ route params ဟာ screen ကို re-mount လုပ်တဲ့အခါ (navigate ထပ်ခေါ်ရင်) update ဖြစ်ပါတယ် — goBack() ပြီး ပြန် navigate ခေါ်တာနဲ့ existing screen ပေါ်ကို params အသစ်ထည့်တာ behavior မတူပါ, differentiate လုပ်တတ်ရပါမယ်။

ဒီနေရာမှာ လူအများမှားတတ်တယ်

Task 1 မှာ disabled logic ကို button style ပြောင်းရုံပဲ လုပ်ပြီး actual onPress function ထဲမှာ count < 10 check ထည့်ဖို့ မေ့ခြင်း
Task 3 မှာ route.params ကို destructure ခင် route prop ကို component ထဲ pass ဖြစ်/မဖြစ် မသေချာဘဲ error ဖြစ်ခြင်း

အခု ကိုယ်တိုင် စမ်းကြည့်

You'll know it worked when: Task ၃ ခုစလုံးအတွက် interactive, navigable screen ပြီးမြောက်မည်။