Getting empty data object from my form react-hook-form

user_11882892 0
Viewed 7337

Form is returning empty data object, but it should return values typed in form. onSubmit function should console.log values given in form, but I don't know why it does not working. Please check it out.

function App() {
    const { register, handleSubmit } = useForm();
    const onSubmit = (data, e) => {
        e.preventDefault();
        console.log(data);
        console.log('sent');
    };
    const onError = (errors, e) => console.log(errors, e);

    return (
        <div className="App">
            <header className="App-header">
                <form onSubmit={handleSubmit(onSubmit, onError)}>
                    <input
                        name="email"
                        autoComplete="off"
                        placeholder="Your email"
                        ref={register({ name: "email" }, { required: true, pattern: /^\S+@\S+$/i })}
                        
                    />
                    <select
                        defaultValue="default"
                        name="select1"
                        ref={register({ name: "select1" }, { required: true })}
                    >
                        <option value="default" disabled>default</option>
                        <option value="A">A</option>
                        <option value="B">B</option>
                    </select>
                    <textarea
                        name="message"
                        placeholder="Your message"
                        ref={register({ name: "message" }, { required: true })}
                    />
                    <button type="submit">Send</button>
                </form>
            </header>
        </div>
    );
}
react-hook-form react-hooks reactjs javascript
2 Answers

check your render function with register method:

register only need validation argument within input elements.

API reference: https://react-hook-form.com/api#register

and also a section for get started:

https://react-hook-form.com/get-started#Quickstart

return (
    <div className="App">
        <header className="App-header">
            <form onSubmit={handleSubmit(onSubmit, onError)}>
                <input
                    name="email"
                    autoComplete="off"
                    placeholder="Your email"
                    ref={register({ required: true, pattern: /^\S+@\S+$/i })}
                    
                />
                <select
                    name="select1"
                    ref={register({ required: true })}
                >
                    <option value="" disabled>default</option> // make sure this is empty to get validation work.
                    <option value="A">A</option>
                    <option value="B">B</option>
                </select>
                <textarea
                    name="message"
                    placeholder="Your message"
                    ref={register({ required: true })}
                />
                <button type="submit">Send</button>
            </form>
        </header>
    </div>
);
user_4092750

generally that's not how things are done in react you need a formData state object which will have same field as your form and n each form input you'll have an onchange function which updates the appropriate formData field like this

function App() {
    const { register, handleSubmit } = useForm();
    const [formdata, setformdata] = useState({
          message:"",
          email:"",
          choice:"",
    });
    const onSubmit = ( e) => {
        e.preventDefault();
        //your form data now is in formdata
        console.log(formdata);
        console.log('sent');
    };
    const onError = (errors, e) => console.log(errors, e);
    const onChangeHandler= (field)=>(e)=>setformdata({...formdata,[field]:e.target.data})
    return (
        <div className="App">
            <header className="App-header">
                <form onSubmit={handleSubmit(onSubmit, onError)}>
                    <input
                        name="email"
                        onChange={onchangeHandler('email')}
                        autoComplete="off"
                        placeholder="Your email"
                        ref={register({ name: "email" }, { required: true, pattern: /^\S+@\S+$/i })}
                        
                    />
                    <select
                        defaultValue="default"
                        name="select1"
                        onChange={onchangeHandler('choice')}
                        ref={register({ name: "select1" }, { required: true })}
                    >
                        <option value="default" disabled>default</option>
                        <option value="A">A</option>
                        <option value="B">B</option>
                    </select>
                    <textarea
                        name="message"
                        placeholder="Your message"
                        onChange={onchangeHandler('message')}
                        ref={register({ name: "message" }, { required: true })}
                    />
                    <button type="submit">Send</button>
                </form>
            </header>
        </div>
    );
}
user_139993860
Related