React ရှိ အရာဝတ္ထုများ၏ Array များအပေါ် တုံ့ပြန်မှုဆိုင်ရာ လုပ်ဆောင်ချက်များ

ယခု အရာဝတ္ထုများ၏ array များအပေါ် တုံ့ပြန်မှုဆိုင်ရာ လုပ်ဆောင်ချက်များ ပြုလုပ်နည်းကို သင်ယူကြပါစို့။ ဤအခြေအနေတွင် ကျွန်ုပ်တို့ လုပ်ဆောင်ရန် ရည်ရွယ်သည့် array အစိတ်အပိုင်း၏ id ကို function အတွင်းသို့ လွှဲပြောင်းပေးရမည်။

function App() {
	const [notes, setNotes] = useState(initNotes);
	
	const result = notes.map(note => {
		return <li key={note.id}>
			<span>{note.prop1}</span>
			<span>{note.prop2}</span>
			<span>{note.prop3}</span>
			
			<button onClick={() => doSmth(note.id)}>
				btn
			</button>
		</li>;
	});
	
	return <div>
		<ul>
			{result}
		</ul>
	</div>;
}

အစိတ်အပိုင်းတစ်ခုနှင့် တစ်စုံတစ်ရာ လုပ်ဆောင်ရန်အတွက်၊ ပထမဦးစွာ array တစ်ခုလုံးကို loop ဖြင့် ဖြတ်သန်းရှာဖွေခြင်းဖြင့် ၎င်းကို ရှာဖွေရမည်။

function App() {
	...
	
	function doSmth(id) {
		setNotes(notes.map(note => {
			if (note.id === id) {
				// အစိတ်အပိုင်းနှင့် တစ်စုံတစ်ရာ လုပ်ဆောင်ပါ
			}
			
			return note;
		}));
	}
}

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

function App() {
	...
	
	function doSmth(id) {
		setNotes(notes.map(note => {
			if (note.id === id) {
				note.prop1 += '!';
				note.prop2 += '!';
				note.prop3 += '!';
				
				return note;
			}
			
			return note;
		}));
	}
}

li တစ်ခုစီ၏ နောက်ဆုံးတွင် button တစ်ခု ပြုလုပ်ပါ၊ ထို button ကို နှိပ်လိုက်သောအခါ ထို li သည် စာရင်းမှ ဖယ်ရှားသွားမည်ဖြစ်သည်။

Input သုံးခု ပေးထားပါသည်။ li တစ်ခုစီ၏ နောက်ဆုံးတွင် button တစ်ခု ပြုလုပ်ပါ၊ ထို button ကို နှိပ်လိုက်သောအခါ ထို li ၏ အရာဝတ္ထု၏ အချက်အလက်များသည် သက်ဆိုင်ရာ input များထဲသို့ ရောက်ရှိသွားမည်ဖြစ်သည်။

ယခင်လုပ်ဆောင်ချက်ကို input များနှင့်အတူ ဘေးတွင် button တစ်ခု ရှိစေရန် ပြင်ဆင်ပါ၊ ထို button ကို နှိပ်လိုက်သောအခါ input များ၏ အချက်အလက်များသည် သက်ဆိုင်ရာ li ထဲသို့ ရောက်ရှိသွားမည်ဖြစ်သည်။