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

ধরুন আমাদের কাছে পণ্যের একটি অ্যারে দেওয়া আছে:

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

ধরুন এই অ্যারেটি Products কম্পোনেন্টে অবস্থিত। এই পণ্যগুলোকে কম্পোনেন্টের স্টেটে লিখি:

function Products() {
	const [prods, setProds] = useState(initProds);
}

এখন আসুন একটি লুপ দিয়ে পণ্যগুলো পড়ি এবং সেগুলো কিছু মার্কআপে আউটপুট করি:

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

আপনি যেমন দেখতে পাচ্ছেন, আমাদের map লুপের বিষয়বস্তু যথেষ্ট জটিল, বিশেষ করে যদি ভবিষ্যতে পণ্যের মার্কআপ বড় হয়ে যায়। এমন জটিলতা পড়া, বোঝা এবং কোড রক্ষণাবেক্ষণ কঠিন করে তোলে।

পণ্য প্রদর্শনের জন্য দায়ী কোডটিকে একটি আলাদা কম্পোনেন্টে স্থানান্তর করা ভাল হবে। এর নাম দিই Product। এখানে আমাদের কম্পোনেন্টের কোড:

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

এখন Products কম্পোনেন্টের ভিতরে map লুপে Product চাইল্ড কম্পোনেন্ট ব্যবহার করা যাক:

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

আপনি যেমন দেখতে পাচ্ছেন, এখন লুপের কোড সরল হয়ে গেছে এবং বোঝার জন্য আরও সুবিধাজনক হয়ে উঠেছে। এছাড়াও, এখন পণ্য প্রদর্শনের জন্য দায়ী একটি পৃথক কম্পোনেন্ট, যেখানে আমরা পণ্যের মার্কআপ তৈরি এবং পরে সম্পাদনা করতে পারি।

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

Users কম্পোনেন্টের স্টেটে নিম্নলিখিত অ্যারে দেওয়া আছে:

const initUsers = [
	{id: id(), name: 'user1', surname: 'surn1', age: 30},
	{id: id(), name: 'user2', surname: 'surn2', age: 31},
	{id: id(), name: 'user3', surname: 'surn3', age: 32},
];

এই অ্যারেটি একটি লুপ দিয়ে পড়ুন এবং সকল ব্যবহারকারীকে স্ক্রিনে আউটপুট করুন। ব্যবহারকারী প্রদর্শনের জন্য একটি পৃথক কম্পোনেন্ট User তৈরি করুন।