@TedJenkler
Posted
Hi @DaniilGurski,
Nice job on the project! I haven't used React Hook or Zod yet, but I'm planning to try them out after I work on more projects with Formik.
One improvement to your code could be reducing the level of nesting. Many of your <div> elements and other tags create unnecessary nesting, which can be streamlined by using Flexbox. For example, the body could be a flex container with the form as its only child, and you can style the form’s children directly, eliminating the need for extra wrappers. Also, in React, you can use the <> </> (Fragment) tags to group elements without adding extra nodes to the DOM, which helps with accessibility and SEO.
Overall, great work—your project looks fantastic and is responsive!
Best, Teodor
Marked as helpful
@TedJenkler Thank you for your reply and advice ! I don't like HTML to be too nested myself, and perhaps I could make it cleaner. Just sometimes I want to add a gap between a couple of elements, so I wrap them in a div and add a flex / grid utility class on top of it which gives me easier access to the gap property.
Good luck learning React Hook form !
@TedJenkler
Posted
Thanks :) @DaniilGurski,
I usually use flex a lot, and as a rule, I always add the margin to the bottom of the element when the gap property isn’t "available"/ makes sense. As long as you're consistent, it makes it easier to find and change later. Plus, this approach helps avoid the margin collapse issue that can occur with certain elements.
