I want to use react-hook-form to handle input from the user. React gives me an error saying "handleSubmit is not a function". Any help would be appreciated.

My code is as followed (react-hook-form 7.13.0)

import { useForm } from "react-hook-form";
import axios from "axios";
import styled from "styled-ponents";

const Style = styled.div`
    .form {
        width: 200px;
        display: flex;
        flex-direction: column;
    }
`;

const Add = (props) => {
    const { register , handleSubmit } = useForm();

    const onSubmit = (e, data) => {
        e.preventDefault();
        console.log(data);
        addReview(data);
    }

    const addReview = (data) => {
        axios.POST("http://localhost:3000/reviews", data).then(() => {
            props.setReviews([...props.reviews, {data}])
        })
    }
    return (
        <Style>
            <h3>Add a review</h3>
            <form className="form" onSubmit={handleSubmit(onSubmit)}>
                <input type="text" placeholder="Book Title" ref={register}></input>
                <input type="text" placeholder="Rating" ref={register}></input>
                <input type="text" placeholder="Review" ref={register}></input>
                <input type="submit" placeholder="Review"></input>
             </form>
        </Style>
    )
};

export default Add;

I want to use react-hook-form to handle input from the user. React gives me an error saying "handleSubmit is not a function". Any help would be appreciated.

My code is as followed (react-hook-form 7.13.0)

import { useForm } from "react-hook-form";
import axios from "axios";
import styled from "styled-ponents";

const Style = styled.div`
    .form {
        width: 200px;
        display: flex;
        flex-direction: column;
    }
`;

const Add = (props) => {
    const { register , handleSubmit } = useForm();

    const onSubmit = (e, data) => {
        e.preventDefault();
        console.log(data);
        addReview(data);
    }

    const addReview = (data) => {
        axios.POST("http://localhost:3000/reviews", data).then(() => {
            props.setReviews([...props.reviews, {data}])
        })
    }
    return (
        <Style>
            <h3>Add a review</h3>
            <form className="form" onSubmit={handleSubmit(onSubmit)}>
                <input type="text" placeholder="Book Title" ref={register}></input>
                <input type="text" placeholder="Rating" ref={register}></input>
                <input type="text" placeholder="Review" ref={register}></input>
                <input type="submit" placeholder="Review"></input>
             </form>
        </Style>
    )
};

export default Add;

• javascript
• reactjs
• react-hook-form

• 2 You need either handleSubmit passed in props, or local function onSumbit = (e, data). onSubmit on <form onSubmit={FUNCTION} > require a function, you MUST NOT call it there, React will call it for you, passing event and other parameters. It shoud be like onSubmit={onSubmit} or onSubmit={handleSubmit} if you passed it as a props. If not, you'll get error saying handleSubmit is not a function. – KeitelDOG Commented Sep 1, 2021 at 21:13
• And also, if you're still calling, then make sure that handleSubmit(onSubmit) returns a function. – KeitelDOG Commented Sep 1, 2021 at 21:15
• Oh ok, I see, you get it from useForm(). Try to log it in console, or dive into package codes to see if the name is still the same. – KeitelDOG Commented Sep 1, 2021 at 21:20
• 1 Have you tried to register fields? Like : <input type="text" placeholder="Book Title" {...register('title')} /> OR <input type="text" placeholder="Book Title" {...register('title', { required: true })} /> – KeitelDOG Commented Sep 1, 2021 at 21:43

4 Answers 4

Pass this for every input with the name in order to register:

{...register("rating")}

Reference: https://react-hook-form./api/useform/register

Can you please try this...

const Add = (props) => {
  const { register, handleSubmit } = useForm();

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

  const addReview = (data) => {
    axios.POST("http://localhost:3000/reviews", data).then(() => {
      props.setReviews([...props.reviews, { data }]);
    });
  };
  return (
    <Style>
      <h3>Add a review</h3>
      <form className="form" onSubmit={handleSubmit(onSubmit)}>
        <input
          type="text"
          placeholder="Book Title"
          {...register("bookTitle")}
        ></input>
        <input type="text" placeholder="Rating" {...register("rating")}></input>
        <input type="text" placeholder="Review" {...register("review")}></input>
        <input type="submit" placeholder="Review"></input>
      </form>
    </Style>
  );
};

You have a typo.

This is what you have currently:

<form className="form" onSubmit={handleSubmit(onSubmit)}>

You call handleSubmit(onSubmit) but I'm guessing you are trying to use onSubmit as a handler. Replace the line above with this:

<form className="form" onSubmit={onSubmit}>

You have to register your input into the hook by invoking the "register" function

Like this <input type="text" placeholder="Rating" {...register("Rating")}></input>