Blank page on React-Hook-Form based contact form

April 3, 2023

I would like to do a simple contact form for my portfolio project that i make with React.js that send a message directly to my e-mail address. I stumbled upon React-Hook-Form, saw some tutorials and videos but my browser shows a blank page when i try to add an error message that should appear when the conditions are not met. I have no errors or warnings in Visual Studio Code terminal but Firefox console says "errors" is undefined. But i thought it was defined at line 11 ? (const {register, handleSubmit, formState, errors} = useForm();

Can someone tell me if there’s something wrong in this ?

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

const wait = function (duration = 1000) {
    return new Promise((resolve) => {
        window.setTimeout(resolve, duration)
    })
}

function Contact() {
    const {register, handleSubmit, formState, errors} = useForm();
    console.log(errors);

    const {isSubmitting} = formState;
    
    const onSubmit = async data => {
        await wait(2000)
    }

    return (
        <div className="contact-pageblock">
            <div className="contact-coverimage">
                <div className="cover">
                    <h1>Contact</h1>
                </div>
            </div>
            <div className="contactform-container">
                <form onSubmit={handleSubmit(onSubmit)}>
                    <div className="name-email">
                        <input type="text" autoComplete="none" name="name" placeholder="Entrez votre nom" {... register("name", {required: true})}/>
                            {errors.name && <p className="error-message">Name is required</p>}
                        <input type="email" autoComplete="none" name="email" placeholder="Entrez votre adresse e-mail" {... register("email", {required: true})}/>
                            {errors.email && <p className="error-message">email is required</p>}
                    </div>
                    <div className="message-submit">
                        <input type="text" autoComplete="none" name="message" placeholder="Votre message" {... register("message", {required: true})}/>
                            {errors.message && <p className="error-message">message is required</p>}
                        <button disabled={isSubmitting}>Envoyer</button>
                    </div>
                </form>
            </div>
        </div>
    )
}

export default Contact