Next.js 15

Kind Kinkajou answered on January 19, 2025 Popularity 1/10 Helpfulness 1/10

answer Next.js 15

Next.js 15

Comment

"use client";
import React, { useActionState } from "react";
import Image from "next/image";
import { FcGoogle } from "react-icons/fc";
import Link from "next/link";
import {addUser} from "@/src/utils/actions"
import { CreateButton } from "./CreateButton";
import { parseWithZod } from "@conform-to/zod";
import { createAccountSchema } from "@/src/utils/ZodSchema";
import { useForm } from "@conform-to/react";
const Page = () => {  
const [lastResult, action] = useActionState(addUser, undefined);  
const [form, fields] = useForm({ 
   lastResult,
    onValidate({ formData }) { 
     return parseWithZod(formData, {
    schema: createAccountSchema,
    });
  }, 
shouldValidate: "onBlur",   
 shouldRevalidate: "onInput", 
 }); 
 return(
     <form id={form.id} onSubmit={form.onSubmit} action={action} noValidate className="mt-4">                        <div className="flex flex-col justify-center items-center">
 <input className="w-full dark:bg-dark px-8 py-3 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white"                 type="text"
placeholder="full name"
 name={fields.name.name} 
defaultValue={fields.name.initialValue as string}
 key={fields.name.key}
 maxLength={40}
 required />
 <p className="text-red-600 text-sm"> {fields.name.errors} </p>
 <input className="w-full px-8 dark:bg-dark py-3 mt-2 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white"                  type="email"
 placeholder="Email"
 name={fields.email.name} 
defaultValue={fields.email.initialValue as string} 
 key={fields.email.key}
required/>
 <p className="text-red-600 text-sm">{fields.email.errors}</p>
<input className="w-full px-8 dark:bg-dark ml-2 sm:ml-0 py-3 mt-2 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white"                  type="password"
 placeholder="Password"
 name={fields.password.name}
 key={fields.password.key}/> 
 <p className="text-red-600 text-sm">{fields.password.errors}</p>
</div> 
<CreateButton /> 
 </form> 
)};
export default Page;

Popularity 1/10 Helpfulness 1/10 Language typescript

Source: www.medcode.dev

Tags: next.js typescript

Link to this answer
Share Copy Link

Contributed on Jan 19 2025

Kind Kinkajou

0 Answers Avg Quality 2/10

Next.js 15

Contents

More Related Answers

Next.js 15

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.