Redux-এ ফর্মে পরিবর্তন আনা

এই সেশনে আমরা পণ্য যোগ করার ফর্মে বিক্রেতার তথ্য প্রদর্শনের কাজ শেষ করব। এটি করার জন্য আমাদের ফর্মের মার্কআপে সামান্য পরিবর্তন আনতে হবে।

আমাদের পণ্য অ্যাপ্লিকেশনটি খুলুন, এবং সেখানে NewProductForm.jsx ফাইলটি খুলুন। আসুন return কমান্ডের আগে ড্রপ-ডাউন তালিকার মার্কআপের জন্য একটি কোড স্নিপেট যোগ করি, যেখানে আমরা বিক্রেতা নির্বাচন করব। এটি map এর মাধ্যমে স্ট্যান্ডার্ড পদ্ধতিতে বাস্তবায়ন করি:

const sellersList = sellers.map((seller) => (
	<option key={seller.id} value={seller.id}>
		{seller.name}
	</option>
))

এবং এখন মার্কআপেই পরিবর্তন আনি। এটি করার জন্য, ফর্মের মধ্যে প্রথম এবং দ্বিতীয় অনুচ্ছেদের মধ্যে (পণ্যের নাম এবং বিবরণের জন্য মার্কআক ব্লকের মধ্যে) আমরা নিম্নলিখিত মার্কআপ সহ একটি অনুচ্ছেদ সন্নিবেশ করব:

<p>
	<label htmlFor="prodSeller">Seller:</label>
	<select id="prodSeller" value={sellerId} onChange={onSellerChanged}>
		<option value=""></option>
		{sellersList}
	</select>
</p>

এখন আমরা আমাদের অ্যাপ্লিকেশন চালু করতে পারি। যোগ করার ফর্মে আমাদের কাছে বিক্রেতাদের একটি তালিকা হাজির হয়েছে। আসুন ফর্মটি ডেটা দিয়ে পূরণ করার চেষ্টা করি, তাদের মধ্যে একজন নির্বাচন করি এবং সংরক্ষণ বোতামে ক্লিক করি। এখন, যদি আমরা Redux DevTools-এ দেখি, আমরা পরিবর্তনগুলি দেখতে পাব - নতুন যোগ করা পণ্যে আমাদের seller বৈশিষ্ট্য রয়েছে যার মান হিসাবে নির্বাচিত বিক্রেতার id রয়েছে। এছাড়াও State ট্যাবে এখন দুটি স্লাইস products এবং sellers প্রদর্শিত হয়।

আপনার শিক্ষার্থীদের অ্যাপ্লিকেশন খুলুন। NewStudentForm.jsx ফাইলে একটি ড্রপ-ডাউন তালিকা teachersList তৈরি করুন map ব্যবহার করে, যাতে পাঠে দেখানো হিসাবে শিক্ষকদের পূর্ণ নাম থাকবে।

মার্কআপে পরিবর্তন আনুন, শিক্ষকদের ড্রপ-ডাউন তালিকা প্রদর্শনের জন্য আরও একটি ব্লক যোগ করুন।

আপনার অ্যাপ্লিকেশন চালু করুন। শিক্ষার্থী যোগ করার ফর্মে আপনার কাছে শিক্ষকদের সাথে একটি ড্রপ-ডাউন তালিকা হাজির হওয়া উচিত, যা আপনি পূর্ববর্তী কাজগুলিতে তৈরি করেছিলেন।