handleSubmit to call another function with event parameter

Question

This is React JS.

I had a nice working sendData function that creates a new record on my json file. It worked nice until I decided to add useForm to add some yup resolvers.

Now in the <form> tag here is onSubmit={}.

If I write here <form onSubmit={handleSubmit(sendData(), onSubmit)}>, I get the error and nothing works as before. enter image description here

I except to understand how handleSubmit works and how to resolve this problem.

Thanks in advance, guys!

my code:

import React, { useState } from 'react';
import { useForm } from 'react-hook-form';
import { Link, useNavigate } from 'react-router-dom';
import Confirmation from './Confirmation';
import * as yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';

const schema = yup.object().shape({
    name: yup.string().required(),
    age: yup.number().positive().required(),
    salary: yup.number().positive().required(),
    email: yup.string().required(),
  })
  .required();

export default function LogIn() {
  const { register, handleSubmit, formState: { errors }, } = useForm({
    resolver: yupResolver(schema),
  });

  // for redirection
  let navigate = useNavigate();
  // modal for ghost mode
  const [show, setShow] = useState(false);

  const [details, setDetails] = useState({
    name: '',
    age: 0,
    salary: 0,
    email: ''
  })


  const sendData = async (event) => {
    event.preventDefault()

    const {name, age, salary, email} = details;

    const res = await fetch("i hide the link :D",
    {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        name, age, salary, email
      })
    })

    navigate("/main");
  }

  const onSubmit = (data) => {
    console.log(data)
  }


  return (
    <div>
      {show && <Confirmation show={show} setShow={setShow} />}
      <div className="form-center">
        <h1>Few Information</h1>
        <form onSubmit={handleSubmit(sendData(), onSubmit)}>
              <div className="form-controll">
                  <input type="text" {...register('name')} placeholder="Name" 
                  onChange={(e) => setDetails({...details,name:e.target.value})}/>
                  {errors.name?.message && <p>{errors.name?.message}</p>}

                  <input type="number" {...register('age')}  placeholder="Age"
                  onChange={(e) => setDetails({...details,age:e.target.value})}/>
                  {errors.age?.message && <p>{errors.age?.message}</p>}

                  <input type="number" {...register('salary')}  placeholder="Salary in $"
                  onChange={(e) => setDetails({...details,salary:e.target.value})}/>
                  {errors.salary?.message && <p>{errors.salary?.message}</p>}

                  <input type="email" {...register('email')} placeholder="Email"
                  onChange={(e) => setDetails({...details,email:e.target.value})}/>
                  {errors.email?.message && <p>{errors.email?.message}</p>}
              </div>

              <div className="forgot">
                Don't want to share data?<br></br>
                <button onClick={() => {setShow(true)}}>Ghost mode</button>
              </div>

              <div className="btn">
                <input type='submit' value='Go' />
              </div>
          </form>
      </div>
    </div>
  )
}

Answer 1

handleSubmit function is a wrapper for react-hook-form to manage your data inputs, validation, errors, etc.. before calling your own sendData function.

Consider doing:

export default function LogIn() {
  const sendData = async (data) => {
    const {name} = data;

    // your post request 
  }


  return (
    <form onSubmit={handleSubmit(sendData}> // remove the useless onSubmit
      <input 
        type="text" 
        {...register('name')} 
        placeholder="Name" 
        // remove the onChange prop
      />
    </form>
    
  )
}