React တွင် မိဘမှ ကလေး components များသို့ state များ လွှဲပြောင်းပေးခြင်း

ကျွန်ုပ်တို့တွင် ထုတ်ကုန်များ ပါဝင်သော array တစ်ခု ရှိသည်ဆိုပါစို့။

const initProds = [
	{id: id(), name: 'product1', cost: 100},
	{id: id(), name: 'product2', cost: 200},
	{id: id(), name: 'product3', cost: 300},
];

ဒီ array ကို Products component ထဲတွင် ထားမည်ဆိုပါစို့။ ထိုထုတ်ကုန်များကို component ၏ state ထဲသို့ ရေးထည့်ပါမည်။

function Products() {
	const [prods, setProds] = useState(initProds);
}

ယခု ထုတ်ကုန်များကို loop ဖြင့် ပတ်ပြီး ၎င်းတို့ကို မည်သည့် layout ထဲမဆို ပြသပါစို့။

function Products() {
	const [prods, setProds] = useState(initProds);
	
	const items = prods.map(prod => {
		return <div key={prod.id}>
			name: <span>{prod.name}</span>,
			cost: <span>{prod.cost}</span>
		</div>;
	});
	
	return <div>
		{items}
	</div>;
}

မြင်တွေ့ရသည့်အတိုင်း ကျွန်ုပ်တို့၏ map loop အတွင်းရှိ အကြောင်းအရာသည် အတော်လေး ရှုပ်ထွေးပါသည်။ အထူးသဖြင့် နောက်ပိုင်းတွင် ထုတ်ကုန်၏ layout များ ပိုမိုကြီးထွားလာပါက ဖြစ်သည်။ ထိုသို့သော ရှုပ်ထွေးမှုသည် ကုဒ်ကို ဖတ်ရှုနားလည်ခြင်းနှင့် ထိန်းသိမ်းခြင်းကို ခက်ခဲစေပါသည်။

ထုတ်ကုန်တစ်ခုအား ပြသခြင်းအတွက် တာဝန်ယူထားသော ကုဒ်ကို သီးခြား component တစ်ခုအဖြစ် ခွဲထုတ်လိုက်ခြင်းက ပိုကောင်းပါလိမ့်မည်။ ကျွန်ုပ်တို့က ၎င်းကို Product ဟု အမည်ပေးပါမည်။ ဒီမှာ ကျွန်ုပ်တို့၏ component ကုဒ်ဖြစ်သည်။

function Product({ name, cost }) {
	return <div>
		name: <span>{name}</span>,
		cost: <span>{cost}</span>
	</div>;
}

ယခု Products component အတွင်း၌ map loop အတွင်းတွင် ကလေး components Product များကို အသုံးပြုပါစို့။

function Products() {
	const [prods, setProds] = useState(initProds);
	
	const items = prods.map(prod => {
		return <Product
			key ={prod.id}
			name={prod.name}
			cost={prod.cost}
		/>;
	});
	
	return <div>
		{items}
	</div>;
}

မြင်တွေ့ရသည့်အတိုင်း ယခုအခါ loop ၏ ကုဒ်သည် ပိုမိုရိုးရှင်းလာပြီး နားလည်ရန် ပိုမိုလွယ်ကူလာပါသည်။ ထို့အပြင် ယခုအခါ ထုတ်ကုန်များကို ပြသခြင်းအတွက် တာဝန်ယူထားသည်မှာ သီးခြား component တစ်ခုဖြစ်ပြီး ၎င်းတွင် ကျွန်ုပ်တို့သည် ထုတ်ကုန်များ၏ layout ကို ဖန်တီးပြီးနောက် တည်းဖြတ်နိုင်ပါသည်။

နည်းပညာအရ ကျွန်ုပ်တို့တွင် မိဘ component သည် ဒေတာများဖြင့် state ရှိပြီး ကလေး components များသည် ထိုဒေတာများကို props အဖြစ် လက်ခံရရှိပြီး ကျွန်ုပ်တို့လိုအပ်သောပုံစံဖြင့် ၎င်းတို့ကို ပြသပေးပါသည်။

Users component ၏ state တွင် အောက်ပါ array ကို ပေးထားသည်။

const initUsers = [
	{id: id(), name: 'user1', surname: 'surn1', age: 30},
	{id: id(), name: 'user2', surname: 'surn2', age: 31},
	{id: id(), name: 'user3', surname: 'surn3', age: 32},
];

ဒီ array ကို loop ဖြင့် ပတ်ပြီး user အားလုံးကို စကရင်ပေါ်တွင် ပြပါ။ user တစ်ဦးကို ပြသရန်အတွက် သီးခြား component User တစ်ခု ဖန်တီးပါ။