React-এ অ্যারে উপর প্রতিক্রিয়াশীল অপারেশন

এখন চলুন শিখি কিভাবে অ্যারের এলিমেন্টগুলির সাথে প্রতিক্রিয়াশীল ম্যানিপুলেশন করা যায়। এজন্য আমরা প্রতিটি li এর উপর একটি ইভেন্ট হ্যান্ডলার সংযুক্ত করব, যার মধ্যে আমরা প্যারামিটার হিসেবে এই li এর ইনডেক্স অ্যারেতে পাস করব:

function App() {
	const [notes, setNotes] = useState([1, 2, 3, 4, 5]);
	
	const result = notes.map((note, index) => {
		return <li key={index} onClick={() => doSmth(index)}>
			{note}
		</li>;
	});
	
	return <div>
		<ul>
			{result}
		</ul>
	</div>;
}

আমাদের ফাংশনের ভিতরে আমরা আমাদের অ্যারের এলিমেন্টের উপর যেকোনো অপারেশন সম্পাদন করতে পারি:

function App() {
	...
	
	function doSmth(index) {
		let copy = Object.assign([], notes);
		copy[index] += '!'; // এলিমেন্টের সাথে কিছু করব
		setNotes(copy);
	}
}

একটি অ্যারে নম্বর দিয়ে দেওয়া আছে। এটিকে একটি ul তালিকা আকারে প্রদর্শন করুন। যেকোনো li এ ক্লিক করলে এর সংখ্যাটিকে বর্গ করুন।

প্রতিটি li এর শেষে একটি বাটন তৈরি করুন, যে বাটনে ক্লিক করলে সেই li টি তালিকা থেকে মুছে যাবে।

একটি ইনপুট দেওয়া আছে। যেকোনো li এ ক্লিক করলে এটি করুন, যাতে সেই li এর টেক্সট ইনপুটে চলে আসে।

পূর্ববর্তী সমস্যাটি পরিবর্তন করুন এমনভাবে, যাতে ইনপুটের ফোকাস চলে গেলে পরিবর্তিত টেক্সট সংশ্লিষ্ট li এ চলে আসে।

একটি বাটন দেওয়া আছে। এই বাটনে ক্লিক করলে li গুলির ক্রম উল্টে দিন।