ProNextJS
    Loading
    lesson

    Wrapping Up the Forms Tutorial

    Jack HerringtonJack Herrington

    By now, you should be comfortable with not only rendering forms in React but also utilizing React Hook Form for data management.

    You've also learnt how to use Zod for data validation and four distinct ways to send data to the server:

    • Sending a JSON payload to an API endpoint
    • Sending a form data payload to an API endpoint
    • Sending a data object to a server action
    • Sending a form data object to another server action.

    The choice of which method to use ultimately depends on the needs of your application.

    What's even more impressive is the minimal use of TypeScript in our implementation!

    While we did employ a bit of typing on the properties of the components, the core functionality of TypeScript was primarily handled by z.infer. This handy function generated the TypeScript type from the Zod schema. Remarkably, the Zod schema itself did not contain any TypeScript types.

    Armed with this knowledge, you should be ready to start building your next forms in a JS environment.

    Enjoy the process, and don't be afraid to explore and experiment!

    Transcript

    So now you know not just how to render forms, but also how to use React Hook Form to manage data, Zod to validate data, and four, yes, four different ways of sending data to the server. A JSON payload to an API endpoint, a form data payload also to an API endpoint, a data

    object to a server action, and finally a form data object to another server action. Of course, you get to pick which is the right methodology for your application. What I find even more impressive is how little TypeScript we used. There's a little typing on the properties of the components, but the heavy lifting of

    TypeScript was done primarily by that z.infer that generated the TypeScript type from the Zod schema. In fact, the Zod schema has no TypeScript types in it at all. So cool. Enjoy, and start building out your next JS forms today.