javascript - TypeError: Object(...) is not a function (React.JS)

Question

I was watching a crud full stack tutorial in react and this error appeared on my browser

TodoForm.js

import React, { useForm, useHistory, useEffect, setTodo } from 'react';

export const TodoForm = ({ todo, onSubmit }) => {
    const {register, handleSubmit} = useForm({ defaultValues: { text: todo ? todo.text : ""} });
    const history = useHistory()

    useEffect(() => {
        setTodo({
            text: "foo"
        })
    }, [])

    const submitHandler = handleSubmit((data) => {
        onSubmit(data)
        history.push("/");
    })
    return (
                <form onSubmit={submitHandler}>
                    <div className="form-group">
                        <label htmlFor="text">Text:</label>
                        <input className="form-control" ref={register} type="text" name="text" id="text">
                        </input>
                    </div>
                    <div className="form-group">
                        <button className="btn btn-primary">
                            CreateTodo
                        </button>
                    </div>
                </form>
        );
}

CreateTodo.js

import React from 'react';
import { TodoForm } from './TodoForm'

export const CreateTodo = () => {

    const onSubmit = (data) => {
        alert(JSON.stringify(data))
    }
    return (
    <div className="container" >
        <div className="mt-3">
            <h3>Create Todo Item</h3>
            <TodoForm onSubmit={onSubmit} />
        </div>
    </div>
    );
};

I already updated my React, the version is 17.0.1. When I removed this line <TodoForm onSubmit={onSubmit} /> it was worked. In my browser screen, seems that the error is on the files above. What should I do?

标签： javascriptreactjsreact-hooks

Answer 1

useForm doesn't seem to belong to "react", the one most close is "react-hook-form", probably you should install that module and import from it, not "react".