fix: bug and console errors (#242)

* specify a key for the rendered lists

* fix duplicate validation error message

Author: morekid

app/signup/page.tsx

@@ -52,7 +52,7 @@ export default function IndexPage() {
       <div className={styles.Section}>
         <h2 className="text-xl font-bold">Try it</h2>
 
-        <div className="flex gap-4">
+        <div className="flex w-[320px] gap-4">
           <EmailForm />
         </div>
 

components/EmailForm.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { formSchema } from "@/app/signup/schema";
 import { Button } from "@/components/ui/button";
 import {
   Form,
@@ -11,7 +12,6 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { formSchema } from "@/app/signup/schema";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
@@ -21,6 +21,7 @@ export function EmailForm() {
   // Allows us to set an error message on the form.
   const {
     setError,
+    clearErrors,
     formState: { errors },
   } = useForm();
   // Used to navigate to the welcome page after a successful form submission.
@@ -37,6 +38,8 @@ export function EmailForm() {
   // Define a submit handler called when the form is submitted. It sends the
   // form data to an API endpoint and redirects to the welcome page on success.
   async function onSubmit(values: z.infer<typeof formSchema>) {
+    clearErrors();
+
     // values is guaranteed to be of the correct type by the Zod schema.
     const result = await fetch("/signup/test", {
       body: JSON.stringify(values),
@@ -63,17 +66,21 @@ export function EmailForm() {
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+      <form onSubmit={form.handleSubmit(onSubmit)} className="w-full space-y-8">
         <FormField
           control={form.control}
           name="email" // The name of the field in the form schema.
-          render={({ field }) => (
+          render={({ field: { onChange, ...field } }) => (
             <FormItem>
               <FormLabel>Email</FormLabel>
               <FormControl>
                 <Input
                   type="email"
                   placeholder="[email protected]"
+                  onChange={(e) => {
+                    clearErrors();
+                    onChange(e);
+                  }}
                   {...field}
                 />
               </FormControl>

components/SiteHeader.tsx

@@ -14,7 +14,7 @@ import { NavItem } from "@/types/nav";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { useMemo, useState } from "react";
+import { Fragment, useMemo, useState } from "react";
 
 import styles from "./SiteHeader.module.scss";
 
@@ -35,17 +35,17 @@ export function SiteHeader() {
       const selected = pathname.indexOf(item.key) >= 0;
 
       return item.key == "home" ? (
-        <></>
+        <Fragment key={"nav-item-" + index}></Fragment>
       ) : item.href && selected ? (
         <span
-          key={index}
+          key={"nav-item-" + index}
           className={cn("text-md flex h-8 items-center font-bold text-primary")}
         >
           {item.title}
         </span>
       ) : (
         <Link
-          key={index}
+          key={"nav-item-" + index}
           href={item.href || ""}
           className={buttonVariants({
             size: "defaultTight",