😅 I Made a Mistake in My Job Portal Form… Let’s Fix It the Right Way! (React Hook Form + Next.js)

Description

Welcome Guys,👋 In today’s video, I’m going to fix a mistake I made in our Job Portal registration form using React Hook Form and Next.js. When users selected their role (Employer or Applicant), the database always stored only “applicant” — because of a small mistake in our form setup. So today, like a genuine developer and teacher 💙, I’ll walk you step-by-step through: Understanding what went wrong How the Controller wrapper in React Hook Form works How to properly connect the Select component with our form state And finally, how to display validation errors correctly By the end of this video, you’ll clearly understand how to integrate custom components (like Select) inside React Hook Form — and your form will now correctly store the selected role in your database. ---------------------------------------------------------------------------------- 📂 Source Code 👉 GitHub Repo: https://github.com/thapatechnical/job-portal-nextjs ------------------------------------------------------------------------------------ 🔗 Useful Playlists 📘 Next.js Full Stack Playlist: https://youtube.com/playlist?list=PLwGdqUZWnOp0lwvSBaIzzgV9X0ZiZ-42O&si=aQ_TNBNNx5L7V_bn ⚛️ React.js Playlist: https://youtube.com/playlist?list=PLwGdqUZWnOp1Rab71vx2zMF6qpwGDB2Z1&si=sDZRxsYNetYmojKd 💻 TypeScript Playlist: https://youtube.com/playlist?list=PLwGdqUZWnOp0xfHQFmlL52b_6-QZ0mnk_&si=c4jfsd5ElDC1p0A5 ------------------------------------------------------------------------------------ 💸 Get All My YouTube Videos' Source Code for just ₹199! Grab Now - https://thapatechnical.shop/source-code 📺 Watch the complete Node.JS Playlist here :https://youtube.com/playlist?list=PLwGdqUZWnOp3KELplHtc-RnJ5xTUPqdgH&si=_ob8F88HYxCdspup 🔥 Access Source Code, PPT & Notes here for Free : https://www.thapatechnical.com/2024/11/introduction-to-nodejs.html ------------------------------------------------------------------------ 🚀 Boost Your Skills with these Pre-Requisite Videos: 🔗 Best HTML Course - https://youtu.be/5ccq_nLHneE 🔗 Best CSS Course - https://youtu.be/MSICFljRcb4 🔗 JavaScript Basics Course Part 1 - https://youtu.be/13gLB6hDHR8 🔗 JavaScript Advanced Course Part 2 - https://youtu.be/YwsOCN8woA8 ------------------------------------------------------------------------ 💸 Build Your Own E-commerce Website for Free! - https://www.thapatechnical.com/2024/03/build-complete-ecommerce-website-using.html ------------------------------------------------------------------------ ✌️ Join Us! 🚀 Become a Member: Unlock perks, free source code, and more Join Now : https://www.youtube.com/channel/UCwfaAHy4zQUb2APNOGXUCCA/join 📷 Connect on Instagram: https://www.instagram.com/thapatechnical 🗨️ Join Our Discord Server: Hang out with fellow programmers Discord Link: https://discord.gg/MdScmCsua6 ------------------------------------------------------------------------ ⌛TIMELINE⏳ 0:00 Intro: Mistake Acknowledged! (Showing the specific error) 1:00 Where the Mistake is: The Select Field and Database Default Value 1:30 A Quick "Thank You" for Supporting the Journey! 2:10 Deep Dive: Understanding the React Hook Form Controller Wrapper 3:40 Passing Essential Props to the Controller Wrapper 4:40 The Role of control Props in React Hook Form 5:20 Using the render Prop within the Controller 6:05 The Props to Pass to our Custom Select Field 7:25 Quick Recap of the Complete Fix 8:19 Checking our Register Form (Verifying the Correct Data is Submitted) 9:00 Task for You: Implementing Error Fields for all inputs