Having the following ponent:

import { yupResolver } from '@hookform/resolvers/yup';
import { useForm } from 'react-hook-form';
import * as yup from 'yup';

import { useToggle } from '../shared/hooks';
import {
  SubsectionLayout,
  Footer,
  Textarea,
  Input,
  Modal,
  Button
} from '../shared/ui-ponents';

const schema = yup.object().shape({
  name: yup.string().required(),
  description: yup.string().required()
});

export interface ITask {
  name: string;
  description: string;
}

export function MainComponent() {
  const [isOpened, toggleModal] = useToggle(false);

  const { handleSubmit, register, reset } = useForm({
    resolver: yupResolver(schema)
  });

  const onSubmit = (data: ITask) => {
    console.log('data: ', data);
    toggleModal();
    reset(data);
  };

  return (
    <div>
      <Button onClick={toggleModal} />
      <SubsectionLayout title='test'>
        <Modal
          title='add element'
          open={isOpened}
          onClose={toggleModal}
          footer={
            <Footer onSubmit={handleSubmit(onSubmit)} onCancel={toggleModal} editMode={true} />
          }
        >
          <div>
            <Input
              inputId='calculation-engine-script-name'
              label='name'
              {...register('name')}
            />

            <Textarea label='description' {...register('description')} />
          </div>
        </Modal>
      </SubsectionLayout>
    </div>
  );
}
export default MainComponent;

It has a button, when clicked it opens a modal where a user can write inside name and description fields.

When the submit button is clicked it must log the content (for testing purpose) and close the modal.

The problem is that when I open again the modal, the input that was introduced before is still there.

I added reset(data) inside onSubmit() but it doesn't seem to be enough.

Any ideas?

Having the following ponent:

import { yupResolver } from '@hookform/resolvers/yup';
import { useForm } from 'react-hook-form';
import * as yup from 'yup';

import { useToggle } from '../shared/hooks';
import {
  SubsectionLayout,
  Footer,
  Textarea,
  Input,
  Modal,
  Button
} from '../shared/ui-ponents';

const schema = yup.object().shape({
  name: yup.string().required(),
  description: yup.string().required()
});

export interface ITask {
  name: string;
  description: string;
}

export function MainComponent() {
  const [isOpened, toggleModal] = useToggle(false);

  const { handleSubmit, register, reset } = useForm({
    resolver: yupResolver(schema)
  });

  const onSubmit = (data: ITask) => {
    console.log('data: ', data);
    toggleModal();
    reset(data);
  };

  return (
    <div>
      <Button onClick={toggleModal} />
      <SubsectionLayout title='test'>
        <Modal
          title='add element'
          open={isOpened}
          onClose={toggleModal}
          footer={
            <Footer onSubmit={handleSubmit(onSubmit)} onCancel={toggleModal} editMode={true} />
          }
        >
          <div>
            <Input
              inputId='calculation-engine-script-name'
              label='name'
              {...register('name')}
            />

            <Textarea label='description' {...register('description')} />
          </div>
        </Modal>
      </SubsectionLayout>
    </div>
  );
}
export default MainComponent;

It has a button, when clicked it opens a modal where a user can write inside name and description fields.

When the submit button is clicked it must log the content (for testing purpose) and close the modal.

The problem is that when I open again the modal, the input that was introduced before is still there.

I added reset(data) inside onSubmit() but it doesn't seem to be enough.

Any ideas?

• javascript
• reactjs
• typescript
• react-hooks
• react-hook-form

Share Improve this question Follow asked Dec 21, 2021 at 20:27 Leo MessiLeo Messi 6,2462222 gold badges8080 silver badges155155 bronze badges 5

• Looks like you're trying to reset the values with the values you get when the form is submitted. Shouldn't it be something like reset()? – Ramesh Reddy Commented Dec 21, 2021 at 20:29
• @RameshReddy I've tried like that but same result – Leo Messi Commented Dec 21, 2021 at 20:30
• 2 did u try reset({ name: '', description: '' }); ? – Shakya Karunathilake Commented Dec 22, 2021 at 6:39
• official react-hook-form docs in 'submit with reset' they have simply added reset({ ...data }); – Shakya Karunathilake Commented Dec 22, 2021 at 6:45
• @ShakyaKarunathilake, your first ment has the correct solution – Leo Messi Commented Dec 22, 2021 at 8:30

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Try reset({ name: '', description: '' });