Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted about 1 year ago

React Controlled Elements + Custom Form Validation

react, tailwind-css
tOnski86•330
@tOnski86
A solution to the Intro component with sign-up form challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


What are you most proud of, and what would you do differently next time?

Before this project, I hated forms.

This project allowed me to focus on how forms work, and how I can translate form submission into code. Although most of the implementation is still crude, this is probably the project I am most proud of to date.

Through this project, I was able to implement (and understand the concepts of):

  • Bundling form submissions into an object
  • Creating a validation object (this is the crude implementation, but I am proud of how I was able to reference this for various types of errors)
  • Successfully submitting a form only when there are no errors
What challenges did you encounter, and how did you overcome them?

Translating concepts into code. So far this project has been enjoyable, so really can't complain.

What specific areas of your project would you like help with?

I am still running into a few challenges with animating parts of the application, especially if components are added/removed to the virtual DOM. Any insight on how to animate components as it mounts/unmounts would be appreciated!

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on tOnski86's solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License