React-এ অবজেক্ট অ্যারেতে রিঅ্যাক্টিভ অপারেশন

এখন চলুন অবজেক্ট অ্যারে উপর রিঅ্যাক্টিভ অপারেশন করা শিখি। এই ক্ষেত্রে আমাদের ফাংশনে পাস করতে হবে id অ্যারের এলিমেন্টের, যার সাথে আমরা কিছু করতে যাচ্ছি:

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>;
}

এলিমেন্টের সাথে কিছু করতে, আমাদের প্রথমে এটি খুঁজে বের করতে হবে, পুরো অ্যারে লুপ করে ঘুরে:

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-এর শেষে একটি বাটন করুন, যে বাটনে ক্লিক করলে এই liটি তালিকা থেকে মুছে যাবে।

তিনটি ইনপুট দেওয়া আছে। প্রতিটি li-এর শেষে একটি বাটন করুন, যে বাটনে ক্লিক করলে এই li-এর অবজেক্টের ডেটা সংশ্লিষ্ট ইনপুটগুলিতে পড়বে।

পূর্ববর্তী কাজটি এমনভাবে পরিবর্তন করুন, যাতে ইনপুটগুলির পাশে একটি বাটন থাকে, যে বাটনে ক্লিক করলে ইনপুটগুলির ডেটা সংশ্লিষ্ট li-এ পড়বে।