Dropdown menu rework

[TaranP1]

No description provided.

[netlify]

✅ Deploy Preview for hackillinois ready!

Name	Link
🔨 Latest commit	64aa9a7
🔍 Latest deploy log	https://app.netlify.com/sites/hackillinois/deploys/676a5f5b28646c000812ac0b
😎 Deploy Preview	https://deploy-preview-249--hackillinois.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[Timothy-Gonzalez]

Previous solution used bootstrap - the problem with bootstrap is that adding that css will mess up everything else - you can't really do partial bootstrap.

If you ever find yourself creating a component, stop. There is enough js libraries in the world. react-select is perfect for our usecase (searchable dropdown), and what we used in the past. While rewriting some parts of the website was good, we shouldn't rewrite everything from scratch.

Changes:

• Changed dropdown to use react-select + formik
• Changed race to be an array
• Moved email to be after names

Misc bug (unrelated to change): all pages are the same form, so touched gets set to true for all fields after first submit. somehow we need to make each page a separate form so this doesn't happen. Example of why this is an issue: On education page, selecting on option marks everything else as wrong even though they haven't been touched yet