Accessing error from react-hook-form using reactstrap

Question

I created a form with reactstrap and react-hook-form. Why are my errors not displaying?

Dummy section which renders text input:

function DummySection() {
  const { control } = useForm();
  return (
    <div>
      <Controller
        name="dummyName"
        control={control}
        rules={{ required: true }}
        defaultValue=""
        render={({ field: { onChange, ref }, fieldState: { error } }) => (
          <TextInput onChange={onChange} innerRef={ref} error={error} />
        )}
      />
    </div>
  );
}

Text input with error:

function TextInput({ onChange, value, innerRef, error }) {
  const updateText = (e) => {
    onChange(e);
    // do something else below
  };
  return (
    <div>
      <Input
        name="dummyName"
        type="text"
        onChange={(e) => updateText(e)}
        value={value}
        innerRef={innerRef}
      />
      {error && "Cannot be blank"}
    </div>
  );
}

Submit Button

function SubmitBtn() {
  const { handleSubmit } = useForm();
  const onSubmit = (data) => console.log(data);

  return <Button onClick={() => handleSubmit(onSubmit)()}>Submit</Button>;
}

Thanks.

Code Sandbox

Shyam · Accepted Answer · 2021-07-14 16:16:56Z

1

@jamfie, you are using different useForm for each component.

Your form need to have the same instance, you can do that by using useformcontext or by passing props to components.

Also, you do not need Controller for this thing, here is codesandbox shows how you can use reactstrap with react-hook-form.

You can also follow this answer in github issue.

answered Jul 14, 2021 at 16:16

Shyam

1,4548 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jamfie Over a year ago

Thanks! I need to control the state hence I used Controller. Using useformcontext and ensuring all form components are using the same instance did the job.

Collectives™ on Stack Overflow

Accessing error from react-hook-form using reactstrap

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related