React-এ প্যারেন্ট স্টেট চাইল্ড কম্পোনেন্টে এডিট করা

এখন আসুন আমরা আমাদের পণ্যগুলি এডিট করি ইনপুট ব্যবহার করে। এটি করার জন্য চাইল্ড কম্পোনেন্টে একটি বাটন তৈরি করি।

এই বাটনে প্রথম ক্লিক করলে পণ্যের নাম এবং দামের পরিবর্তে সেগুলি এডিট করার জন্য ইনপুট দেখা যাক, এবং দ্বিতীয় ক্লিকে ইনপুটের পরিবর্তে আবার টেক্সট দেখানো যাক।

পণ্যের অ্যারেতে পরিবর্তন করি, যোগ করি isEdit প্রপার্টি (এবং সহজতার জন্য কার্টের কাজ এখানে সরিয়ে ফেলি):

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

Product কম্পোনেন্ট

পণ্যে একটি এডিট বাটন তৈরি করি:

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

এই বাটনে ক্লিক করলে যেন toggleMode নামক একটি ফাংশন কল হয়, সেটা করি, যা প্যারেন্ট কম্পোনেন্ট থেকে পাস করা হবে:

function Product({ id, name, cost, isEdit, toggleMode }) {
	return <div>
		name: <span>{name}</span>
		cost: <span>{cost}</span>
		
		<button onClick={() => toggleMode(id)}>
			edit
		</button>
	</div>;
}

আমাদের এখনও toggleMode-এর বাস্তবায়ন নেই, কিন্তু আমরা জানি, এটি থাকবে প্যারেন্ট কম্পোনেন্টে, প্যারামিটার হিসেবে নিবে পণ্যের id এবং isEdit প্রপার্টি বিপরীত করে দিবে।

আসুন এটাও করি যাতে বাটনের টেক্সট প্রতিবার ক্লিকে পরিবর্তন হয়:

function Product({ id, name, cost, isEdit, toggleMode }) {
	return <div>
		name: <span>{name}</span>
		cost: <span>{cost}</span>
		
		<button onClick={() => toggleMode(id)}>
			{isEdit ? 'save': 'edit'}
		</button>
	</div>;
}

এখন করি যেন এডিট মোডে ডেটা সহ ইনপুট দেখা যায়, আর সাধারণ মোডে - স্প্যান:

function Product({ id, name, cost, isEdit, toggleMode }) {
	return <div>
		name: {isEdit ? <input value={name} /> : <span>{name}</span>}
		cost: {isEdit ? <input value={cost} /> : <span>{cost}</span>}
		
		<button onClick={() => toggleMode(id)}>
			{isEdit ? 'save': 'edit'}
		</button>
	</div>;
}

আমাদের ইনপুটগুলিতে onChange ইভেন্ট বাঁধি, যাতে একটি প্যারেন্ট ফাংশন editProd কল হয়:

function Product({ id, name, cost, isEdit, toggleMode, editProd }) {
	return <div>
		name: {
			isEdit
			? <input value={name} onChange={event => editProd(id, 'name', event)} />
			: <span>{ name }</span>
		}
		cost: {
			isEdit
			? <input value={cost} onChange={event => editProd(id, 'cost', event)} />
			: <span>{ cost }</span>
		}
		
		<button onClick={() => toggleMode(id)}>
			{isEdit ? 'save': 'edit'}
		</button>
	</div>;
}

Products কম্পোনেন্ট

এখন Products কম্পোনেন্টে যাই। এতে toggleMode ফাংশন বাস্তবায়ন করি:

function toggleMode(id) {
	setProds(prods.map(prod => {
		if (prod.id === id) {
			prod.isEdit = !prod.isEdit;
		}
		
		return prod;
	}));
}

এছাড়াও এতে editProd ফাংশন বাস্তবায়ন করি:

function editProd(id, field, event) {
	setProds(prods.map(prod => {
		if (prod.id === id) {
			prod[field] = event.target.value;
		}
		
		return prod;
	}));
}

পণ্যের ট্যাগে আমাদের ফাংশন toggleMode এবং editProd অ্যাট্রিবিউট হিসেবে পাস করি:

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

Products কম্পোনেন্টের চূড়ান্ত কোড নিম্নরূপ হবে:

function Products() {
	const [prods, setProds] = useState(initProds);
	
	function toggleMode(id) {
		setProds(prods.map(prod => {
			if (prod.id === id) {
				prod.isEdit = !prod.isEdit;
			}
			
			return prod;
		}));
	}
	
	function editProd(id, field, event) {
		setProds(prods.map(prod => {
			if (prod.id === id) {
				prod[field] = event.target.value;
			}
			
			return prod;
		}));
	}
	
	const result = prods.map(prod => {
		return <Product
			key ={prod.id}
			id  ={prod.id}
			name={prod.name}
			cost={prod.cost}
			isEdit={prod.isEdit}
			toggleMode={toggleMode}
			editProd={editProd}
		/>;
	});
	
	return <div>
		{result}
	</div>;
}

ব্যবহারিক কাজ

আপনি পূর্ববর্তী পাঠে তৈরি করা Users এবং User কম্পোনেন্টগুলির সাথে একই অপারেশন করুন।