zrozumiecReact.pl

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

export function Form({ onSave }) {
    const { 
        register, 
        handleSubmit, 
        formState: { errors, isSubmitted } 
    } = useForm();        
    
    if (isSubmitted) {
        return <h2>Hasło zapisane!</h2>;
    }

    return (
        <form onSubmit={handleSubmit(onSave)}>
            <input 
                {...register("password", { required: "Podaj nowe hasło" })} 
                type="password" 
                placeholder="Wpisz nowe hasło" />

            {errors.password && <span className="error">{errors.password.message}</span>}

            <input 
                {...register("passwordConfirmation", { required: "Potwierdź hasło" })} 
                type="password" 
                placeholder="Wpisz nowe hasło ponownie" />

            {errors.passwordConfirmation && <span className="error">{errors.passwordConfirmation.message}</span>}
            
            <button type="submit">Zapisz</button>
        </form>
    );
}