Avoid form being reset

Question

I am trying react-hook-forms. Is there anyway to not reset the form when submitting? Everytime I click submit form is reset.

import React from "react"; import { useForm } from "react-hook-form";

import {
  Row,
  Col,
  Card,
  CardHeader,
  CardBody,
  Form,
  FormGroup,
  Label,
  Input,
  Button
} from "reactstrap";

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

  const GetSearchForm = () => {
    const timePickerStyle = { width: 96, important: "true" };

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

    return (
      <Form onSubmit={handleSubmit(onSearch)}>
        <Row>
          <Col>
            <FormGroup>
              <Label for="exampleEmail">Account Id</Label>
              <Input
                type="number"
                name="account"
                id="account"
                placeholder="AccountId"
                innerRef={register}
              />
            </FormGroup>
          </Col>
          <Col>
            <FormGroup>
              <Label for="examplePassword">Email</Label>
              <Input
                type="email"
                name="email"
                id="email"
                placeholder="Email"
                innerRef={register}
              />
            </FormGroup>
          </Col>

          <Col>
            <FormGroup>
              <Label for="exampleEmail">xPage Id</Label>
              <Input
                type="number"
                name="xpageid"
                id="xpage"
                placeholder="xPage Id"
                innerRef={register}
              />
            </FormGroup>
          </Col>
          <Col>
            <FormGroup>
              <Label for="examplePassword">Content Devider Id</Label>
              <Input
                type="number"
                name="contentdevider"
                id="contentdeviderid"
                placeholder="Content Devider Id"
                innerRef={register}
              />
            </FormGroup>
          </Col>
          <Col>
            <FormGroup>
              <Label for="examplePassword">Custom Page Id</Label>
              <Input
                type="number"
                name="custompage"
                id="custompageid"
                placeholder="Custom Page Id"
                innerRef={register}
              />
            </FormGroup>
          </Col>
          <Col>
            <FormGroup>
              <Label for="examplePassword">Service</Label>
              <Input
                type="text"
                name="servicename"
                id="servicename"
                placeholder="Custom Page Id"
                innerRef={register}
              />
            </FormGroup>
          </Col>
        </Row>

        <Row>
          <Col xs="4">
            <FormGroup>
              <Label for="exampleDate">Date</Label>
              <Row>
                <Col xs="8">
                  <Input
                    type="date"
                    name="date"
                    id="exampleDate"
                    placeholder="date placeholder"
                    innerRef={register}
                  />
                </Col>
                <Col xs="3">
                  <Input
                    style={timePickerStyle}
                    type="time"
                    name="time"
                    id="exampleTime"
                    placeholder="time placeholder"
                    innerRef={register}
                  />
                </Col>
              </Row>
            </FormGroup>
          </Col>
          <Col xs="4">
            <FormGroup>
              <Label for="exampleDate">Date</Label>
              <Row>
                <Col xs="8">
                  <Input
                    type="date"
                    name="date"
                    id="exampleDate"
                    placeholder="date placeholder"
                    innerRef={register}
                  />
                </Col>
                <Col xs="3">
                  <Input
                    style={timePickerStyle}
                    type="time"
                    name="time"
                    id="exampleTime"
                    placeholder="time placeholder"
                    innerRef={register}
                  />
                </Col>
              </Row>
            </FormGroup>
          </Col>
        </Row>

        <Button>Submit</Button>
      </Form>
    );
  };

  return (
    <Row>
      <Col xs="12" lg="12">
        <Card>
          <CardHeader>
            <i className="fa fa-align-justify"></i> Insights
          </CardHeader>
          <CardBody>
            <GetSearchForm></GetSearchForm>
          </CardBody>
        </Card>
      </Col>
    </Row>
  );
};

export default Insights;

Domino987 Domino987 · Accepted Answer · 2020-03-25T11:13:07

Because GetSearchForm is its own component, it gets created every time Insights is being rerendered.

You call the register function with the innerRef, but since the Input changed, and it is not the same component (newly created), its getting newly registered, which resets the state.

You either can move the useForm to the GetSearchForm and pass the data back up on submit or inline the whole form in Insights.

Avoid form being reset

1 Answers