hydratation error on Input.tsx and RegisterForm.tsx
This is the Input.tsx code
<code>import { UseFormRegister, FieldValues, FieldErrors } from "react-hook-form";
interface InputProps {
id: string;
label: string;
type?: string;
disabled?: boolean;
required?: boolean;
register: UseFormRegister<FieldValues>;
errors: FieldErrors;
}
const Input: React.FC<InputProps> = ({
id,
label,
type,
disabled,
required,
register,
errors,
}) => {
return (
<div className="w-full relative">
<input
autoComplete="off"
id={id}
disabled={disabled}
{...register(id, { required })}
placeholder=""
type={type}
className={`
peer
w-full
p-4
pt-6
outline-none
bg-white
font-light
border-2
rounded-md
transition
disabled:opacity-70
disabled:cursor-not-allowed
${errors[id] ? "border-rose-400" : "border-slate-300"}
${errors[id] ? "focus:border-rose-400" : "focus:border-slate-300"}
`}
/>
<label
htmlFor={id}
className={`
absolute
cursor-text
text-md
duration-150
-translate-y-3
top-5
z-10
origin-0
left-4
peer-placeholder-shown:scale-100
peer-placeholder-shown:translate-y-0
peer-focus:scale-75
peer-focus:-translate-y-4
transform
${errors[id] ? "text-rose-500" : "text-slate-400"}
`}
>
{label}
</label>
</div>
);
};
export default Input;
</code>
<code>import { UseFormRegister, FieldValues, FieldErrors } from "react-hook-form";
interface InputProps {
id: string;
label: string;
type?: string;
disabled?: boolean;
required?: boolean;
register: UseFormRegister<FieldValues>;
errors: FieldErrors;
}
const Input: React.FC<InputProps> = ({
id,
label,
type,
disabled,
required,
register,
errors,
}) => {
return (
<div className="w-full relative">
<input
autoComplete="off"
id={id}
disabled={disabled}
{...register(id, { required })}
placeholder=""
type={type}
className={`
peer
w-full
p-4
pt-6
outline-none
bg-white
font-light
border-2
rounded-md
transition
disabled:opacity-70
disabled:cursor-not-allowed
${errors[id] ? "border-rose-400" : "border-slate-300"}
${errors[id] ? "focus:border-rose-400" : "focus:border-slate-300"}
`}
/>
<label
htmlFor={id}
className={`
absolute
cursor-text
text-md
duration-150
-translate-y-3
top-5
z-10
origin-0
left-4
peer-placeholder-shown:scale-100
peer-placeholder-shown:translate-y-0
peer-focus:scale-75
peer-focus:-translate-y-4
transform
${errors[id] ? "text-rose-500" : "text-slate-400"}
`}
>
{label}
</label>
</div>
);
};
export default Input;
</code>
import { UseFormRegister, FieldValues, FieldErrors } from "react-hook-form";
interface InputProps {
id: string;
label: string;
type?: string;
disabled?: boolean;
required?: boolean;
register: UseFormRegister<FieldValues>;
errors: FieldErrors;
}
const Input: React.FC<InputProps> = ({
id,
label,
type,
disabled,
required,
register,
errors,
}) => {
return (
<div className="w-full relative">
<input
autoComplete="off"
id={id}
disabled={disabled}
{...register(id, { required })}
placeholder=""
type={type}
className={`
peer
w-full
p-4
pt-6
outline-none
bg-white
font-light
border-2
rounded-md
transition
disabled:opacity-70
disabled:cursor-not-allowed
${errors[id] ? "border-rose-400" : "border-slate-300"}
${errors[id] ? "focus:border-rose-400" : "focus:border-slate-300"}
`}
/>
<label
htmlFor={id}
className={`
absolute
cursor-text
text-md
duration-150
-translate-y-3
top-5
z-10
origin-0
left-4
peer-placeholder-shown:scale-100
peer-placeholder-shown:translate-y-0
peer-focus:scale-75
peer-focus:-translate-y-4
transform
${errors[id] ? "text-rose-500" : "text-slate-400"}
`}
>
{label}
</label>
</div>
);
};
export default Input;
and this is the RegisterForm.tsx code
<code>'use client'
import { useState} from "react";
import Input from "../components/inputs/Input";
import Heading from "../components/products/Heading";
import {FieldValues, SubmitHandler, useForm} from 'react-hook-form'
import Button from "../components/products/Buttons";
import Register from "./page";
import register from "../components/inputs/Input";
import Link from "next/link";
import { AiOutlineGoogle } from "react-icons/ai";
const RegisterForm = () => {
const [isLoading, setIsLoading] = useState(false)
const {register, handleSubmit, formState: {errors}} = useForm<FieldValues>({
defaultValues:{
name: "",
email:"",
password: "",
},
});
const onSubmit:SubmitHandler<FieldValues> = (data) =>
{
setIsLoading(true)
console.log(data)
};
return (
<>
<Heading title="Sign up for Technify Gadgets"></Heading>
<Button outline
label="Sign up with Google"
icon={AiOutlineGoogle}
onClick={() => {}}>
</Button>
<hr className="bg-slate-300 w-full h-px"/>
<Input id="name"
label="Name"
disabled={isLoading}
register={register}
errors={errors}
required
/>
<Input id="email"
label="Email"
disabled={isLoading}
register={register}
errors={errors}
required
/>
<Input id="password"
label="Password"
disabled={isLoading}
register={register}
errors={errors}
required
type="password"
/>
<Button label={isLoading ? "Loading" : "Sign Up"}
onClick={handleSubmit(onSubmit)}/>
<p className="text-sm">
Already have an account? <Link className="underline" href='/login'>
Log In
</Link>
</p>
</>
);
}
export default RegisterForm;
</code>
<code>'use client'
import { useState} from "react";
import Input from "../components/inputs/Input";
import Heading from "../components/products/Heading";
import {FieldValues, SubmitHandler, useForm} from 'react-hook-form'
import Button from "../components/products/Buttons";
import Register from "./page";
import register from "../components/inputs/Input";
import Link from "next/link";
import { AiOutlineGoogle } from "react-icons/ai";
const RegisterForm = () => {
const [isLoading, setIsLoading] = useState(false)
const {register, handleSubmit, formState: {errors}} = useForm<FieldValues>({
defaultValues:{
name: "",
email:"",
password: "",
},
});
const onSubmit:SubmitHandler<FieldValues> = (data) =>
{
setIsLoading(true)
console.log(data)
};
return (
<>
<Heading title="Sign up for Technify Gadgets"></Heading>
<Button outline
label="Sign up with Google"
icon={AiOutlineGoogle}
onClick={() => {}}>
</Button>
<hr className="bg-slate-300 w-full h-px"/>
<Input id="name"
label="Name"
disabled={isLoading}
register={register}
errors={errors}
required
/>
<Input id="email"
label="Email"
disabled={isLoading}
register={register}
errors={errors}
required
/>
<Input id="password"
label="Password"
disabled={isLoading}
register={register}
errors={errors}
required
type="password"
/>
<Button label={isLoading ? "Loading" : "Sign Up"}
onClick={handleSubmit(onSubmit)}/>
<p className="text-sm">
Already have an account? <Link className="underline" href='/login'>
Log In
</Link>
</p>
</>
);
}
export default RegisterForm;
</code>
'use client'
import { useState} from "react";
import Input from "../components/inputs/Input";
import Heading from "../components/products/Heading";
import {FieldValues, SubmitHandler, useForm} from 'react-hook-form'
import Button from "../components/products/Buttons";
import Register from "./page";
import register from "../components/inputs/Input";
import Link from "next/link";
import { AiOutlineGoogle } from "react-icons/ai";
const RegisterForm = () => {
const [isLoading, setIsLoading] = useState(false)
const {register, handleSubmit, formState: {errors}} = useForm<FieldValues>({
defaultValues:{
name: "",
email:"",
password: "",
},
});
const onSubmit:SubmitHandler<FieldValues> = (data) =>
{
setIsLoading(true)
console.log(data)
};
return (
<>
<Heading title="Sign up for Technify Gadgets"></Heading>
<Button outline
label="Sign up with Google"
icon={AiOutlineGoogle}
onClick={() => {}}>
</Button>
<hr className="bg-slate-300 w-full h-px"/>
<Input id="name"
label="Name"
disabled={isLoading}
register={register}
errors={errors}
required
/>
<Input id="email"
label="Email"
disabled={isLoading}
register={register}
errors={errors}
required
/>
<Input id="password"
label="Password"
disabled={isLoading}
register={register}
errors={errors}
required
type="password"
/>
<Button label={isLoading ? "Loading" : "Sign Up"}
onClick={handleSubmit(onSubmit)}/>
<p className="text-sm">
Already have an account? <Link className="underline" href='/login'>
Log In
</Link>
</p>
</>
);
}
export default RegisterForm;
Can someone tell me what to do to solve the did not expect server html to contain in a
Please, thank you!
I have tried using the useEffect() on what I researched on google and documentation
New contributor
Stescu Ștefan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.