zrozumiecReact.pl

import { useForm } from "react-hook-form";

export function Form({ onAddPerson }) {
    const { 
        register, 
        handleSubmit, 
        formState: { errors } 
    } = useForm();        
    
    return (
        <form onSubmit={handleSubmit(onAddPerson)}>
            <input 
                {...register("name", { required: "Podaj imię" })} 
                type="text" 
                placeholder="Wpisz imię" />
            {errors.name && <span className="error">{errors.name.message}</span>}

            <input 
                {...register("id", { required: "Podaj numer dowodu osobistego lub paszportu" })} 
                type="text" 
                placeholder="Wpisz numer dowodu osobistego" />
            {errors.id && <span className="error">{errors.id.message}</span>}

            <input 
                {...register("passport", { required: "Podaj numer dowodu osobistego lub paszportu" })} 
                type="text" 
                placeholder="Wpisz numer paszportu" />
        {errors.id && <span className="error">{errors.id.message}</span>}
            
            <button type="submit">Dodaj</button>
        </form>
    );
}