React hook form does not work with input from reactstrap

Question

I have a problem with react-hook-form and reactstrap. I have this component List.jsx:

import { useContext, useEffect } from "react";
import { ListContext, ADD_LIST } from '../providers/ShoppingListProvider';
import { Link } from "react-router-dom";
import { useForm } from 'react-hook-form';
import { ListGroup, ListGroupItem, Form, FormGroup, Button, Input, Label, Container, Row, Col } from 'reactstrap';





export const Lists = () => {
    const [store, dispatch] = useContext(ListContext);
    const { register, handleSubmit, formState: { errors }, getValues } = useForm();
    const onSubmit = data => addList(data);

    const addList = (data) => {
        console.log(data);
        //dispatch({ type: ADD_LIST, store: store, listName: data.name });

    }

    return (
        <Container>
            <Row>
                <Col>

                    <ListGroup>
                        {store.lists.map((item, key) => {

                            return <ListGroupItem key={key} ><Link to={"/list/" + key}>{item.name}</Link></ListGroupItem>
                        })}
                    </ListGroup>
                </Col>
                <Col>
                    <Form onSubmit={handleSubmit(onSubmit)}>
                        <FormGroup>
                            <Label >Name of new list</Label>
                            <Input type="text" placeholder="name of list" {...register("name", { required: true })} ></Input>
                        </FormGroup>
                        <Button type="submit">Přidat list</Button>
                    </Form>
                </Col>
            </Row>

        </Container>
    );

}

the problem is, that when I submit the form, nothing happens (addList won't happen). But when I replace Input (from reactstrap) with normal input from classic html, everything seems working. So the problem is Input from reactstrap. Does anyone knows how to fix this issue? Thank you very much!

Answer 1

Try like this, look at the innerRef in input

const { register, handleSubmit, formState: { errors } } = useForm();
const { ref, ...rest } = register('name')
const onSubmit = data => console.log(data);
return (
    <form onSubmit={handleSubmit(onSubmit)}>
        <Input type="text" placeholder="Name" innerRef={ref} {...rest} />

        <Input type="submit" />
    </form>
);