React တွင် မိဘ component ၏ state ကို ကလေး component မှ ပြောင်းလဲခြင်း

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

ယခု ကျွန်ုပ်တို့ထုတ်ကုန်များကို ပြောင်းလဲလိုသည်ဆိုပါစို့။ ဥပမာအားဖြင့် ကျွန်ုပ်တို့၏ ထုတ်ကုန်ကို ခြင်းတောင်းထဲသို့ ထည့်မည့် ခလုတ်တစ်ခုလုပ်ကြည့်ကြပါစို့။ အစပိုင်းအနေဖြင့် ကျွန်ုပ်တို့၏ ထုတ်ကုန်များပါရှိသော array ထဲသို့ ထုတ်ကုန်သည် ခြင်းတောင်းထဲတွင်ရှိမရှိ ပြသနိုင်သော inCart အကွက်ကို ထည့်ကြပါစို့။

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

Products component ရှိ ထုတ်ကုန်ပါဝင်သော tag တွင် inCart အကွင်းအမည်တစ်ခု ထပ်မံထည့်ကြပါမည်။

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

ကလေး component ဖြစ်သော Product အတွင်း၌ ခြင်းတောင်းအချက်အလက်များနှင့် ခြင်းတောင်းထဲသို့ထည့်ရန် ခလုတ်ကို ထုတ်ပြရန် ပြုလုပ်ကြပါစို့။

function Product({ id, name, cost, inCart }) {
	return <div>
		name: <span>{name}</span>,
		cost: <span>{cost}</span>,
		<span>{inCart ? 'in cart' : 'not in cart'}</span>
		<button>to cart</button>
	</div>;
}

ထည့်သွင်းခြင်းကို အကောင်အထည်ဖော်ခြင်း

React ၏ စည်းမျဉ်းများအရ component တစ်ခုသည် ၎င်း၏ props များကို မပြောင်းလဲသင့်ပါ။ ဆိုလိုသည်မှာ ကလေး component သည် inCart prop ကိုပြောင်းလဲကာ ၎င်းကိုယ်၎င်း ခြင်းတောင်းထဲသို့ ထည့်၍မရပါ။ ထိုသို့လုပ်ခြင်းမှာ မမှန်ကန်ပါ။

မိဘ component အား ၎င်း၏ state ဖြစ်သော prods ကို ပြောင်းလဲ၍ သတ်မှတ်ထားသော ထုတ်ကုန်တစ်ခုကို ခြင်းတောင်းထဲထည့်ရန် တောင်းဆိုခြင်းသည် မှန်ကန်သောနည်းလမ်းဖြစ်သည်။

ထိုသို့မည်သို့ပြုလုပ်သည်ကို ကြည့်ရှုကြပါစို့။

မိဘ component တွင် addToCart function တစ်ခုပြုလုပ်ပါမည်။ ထို function သည် ထုတ်ကုန်၏ id ကို parameter အဖြစ်လက်ခံပြီး ထိုထုတ်ကုန်အတွက် inCart property ကို true သို့ ပြောင်းလဲပေးမည်ဖြစ်သည်။

function addToCart(id) {
	setProds(prods.map(prod => {
		if (prod.id === id) {
			prod.inCart = true;
		}
		
		return prod;
	}));
}

ထုတ်ကုန်ပါဝင်သော tag သို့ ကျွန်ုပ်တို့ဖန်တီးထားသော function ကို ပို့ဆောင်ပေးမည့် အကွင်းအမည်တစ်ခု၊ ထို့အပြင် ထုတ်ကုန်၏ id ကို ပို့ဆောင်ပေးမည့် အကွင်းအမည်တစ်ခု ထပ်ထည့်ပါမည်။

const items = prods.map(prod => {
	return <Product
		key      ={prod.id}
		id       ={prod.id}
		name     ={prod.name}
		cost     ={prod.cost}
		inCart   ={prod.inCart}
		addToCart={addToCart}
	/>;
});

သင်မြင်တွေ့ရသည့်အတိုင်း component များ၏ props သို့ ဒေတာအချို့သာမက function များကိုလည်း ပို့ဆောင်နိုင်ပါသည်။

Products class ၏ နောက်ဆုံးကုဒ်သည် အောက်ပါအတိုင်းဖြစ်လာမည်။

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

ယခုအခါ ကလေး class တွင် addToCart function ကို အသုံးပြုနိုင်ပြီဖြစ်သည်။ ထို function ကို ခလုတ်အပေါ် ကလစ်နှိပ်ခြင်းဖြင့် ခေါ်ယူပြီး ထုတ်ကုန်၏ id ကို parameter အဖြစ်ပို့ဆောင်ပေးပါမည်။

function Product({ id, name, cost, inCart, addToCart }) {
	return <div>
		name: <span>{name}</span>,
		cost: <span>{cost}</span>,
		<span>{inCart ? 'in cart' : 'not in cart'}</span>
		<button onClick={() => addToCart(id)}>to cart</button>
	</div>;
}

ဖြစ်ပေါ်လာမည်မှာ ကလေး component ရှိ ခလုတ်ကို နှိပ်လိုက်သောအခါ မိဘ component ရှိ function ကိုခေါ်ယူမည်ဖြစ်ပြီး ထို function သည် မိဘ component ၏ state ကိုပြောင်းလဲမည်ဖြစ်သည်။ မိဘ component ၏ state ပြောင်းလဲခြင်းသည် ပြန်လည် render လုပ်ခြင်းကိုဖြစ်စေပြီး ပြောင်းလဲထားသော prop ကို ပို့ဆောင်ပေးလျက် ကျွန်ုပ်တို့၏ ထုတ်ကုန်ကို ပြန်လည်ရေးဆွဲစေမည်ဖြစ်သည်။

ယခင်သင်ခန်းစာမှ User component ကိုယူပါ။ အသုံးပြုသူကို ပိတ်ပင်တားမြစ်ရန် ခလုတ်တစ်ခုပေါ်လာစေရန် ပြုလုပ်ပါ။