How do you properly integrate react-hook-form v7 with reactstrap 9

[niikkiin]

Hi guys!
I'm currently trying to create a form with react-hook-form v7 and reactstrap 9, using react 18. Here's my current implementation but in my console logs, the data is returning an undefined. If you guys could tell me how to properly integrate them, it would be helpful. Thanks a lot!

const { register, handleSubmit } = useForm();

const onSubmit = (data) => {
    //here, the output is --> {email: undefined, password: undefined}
    console.log("sign in form data", data);
};

// Sample Form
 <Form inline onSubmit={handleSubmit(onSubmit)}>
      <FormGroup className="mb-2">
        <Label className="auth-label" htmlFor="email">
          Email address*
        </Label>
        <Input
          id="email"
          name="email"
          placeholder=""
          type="email"
          className="auth-input"
          {...register("email")}
        />
      </FormGroup>
      <Button block className="auth-button mt-4">
        Login
      </Button>
 </Form>

[bluebill1049]

can you share a codesandbox?

<Input
  id="email"
  name="email"
  placeholder=""
  type="email"
  className="auth-input"
  {...register("email")}
/>

The above looks correct if bootstrap exposes the expected props, I am not very familiar with bootstrap. If it's not working you can try to wrap it with Controller, https://react-hook-form.com/api/usecontroller/controller

some external controlled components examples here: https://codesandbox.io/s/react-hook-form-v7-controller-5h1q5

[MohammadAttarzoghi]

thank but your solution does not work integrating reac-hook-form and reactstrap
one solution is useing simple JS input element, but it is not a wanted one.

[leapful]

@niikkiin, @bluebill1049

The current reactstrap version 9 is using prop "innerRef" for Input component while "react-hook-form" expects prop "ref" to be registered.

I would suggest to pass "ref" from "register('email')" into Input component like this:

const { ref, ...registerEmail } = register('email');

<Input innerRef={ref} {...registerEmail} />

Working demo: https://codesandbox.io/s/jovial-dirac-17zpy4?file=/src/App.tsx

[soumyaexavalu]

@niikkiin, @bluebill1049

The current reactstrap version 9 is using prop "innerRef" for Input component while "react-hook-form" expects prop "ref" to be registered.

I would suggest to pass "ref" from "register('email')" into Input component like this:

const { ref, ...registerEmail } = register('email');

<Input innerRef={ref} {...registerEmail} />

Working demo: https://codesandbox.io/s/jovial-dirac-17zpy4?file=/src/App.tsx

how to implement this same thing for multiple line

[vitalijalbu]

how to do for multiple field?

hi, did you found a way??

[mrideout1985]

Anyone found a way to do this with multiple fields yet? This seems so fucking hacky.

[leapful]

@soumyaexavalu @vitalijalbu @mrideout1985

The main issue of this discussion is for single Input component which the author already explained that data is undefined with code example and it has been solved.

Please provide a codesandbox and details of the problem that you have and if possible, please create another discussion. No one can guess if your issue is the same with author's issue or it's another problem without any context or code example.

[vitalijalbu]

Anyone found a way to do this with multiple fields yet? This seems so fucking hacky.

I found it! I switched to chakra ui and it's amazing, you should try it.

[vitalijalbu]

Hi, I'm using reactstrap v9, and don't want to use classNames each time on every input. How to use it properly with reactstrapv9 (multiple fields) ??

<Form>
  <FormGroup>
    <Label for="title">Titolo</Label>
    <input
      id="title"
      className={`form-control ${errors.title ? "is-invalid" : ""}`}
      {...register("title", { required: true })}
    />
  </FormGroup>
  <FormGroup>
    <Label for="title">Titolo 2</Label>
    <input
      id="title2"
      className={`form-control ${errors.title ? "is-invalid" : ""}`}
      {...register("title2", { required: true })}
    />
  </FormGroup>
</Form>;

[craigmcc]

@vitalijalbu I addressed this kind of problem myself (although using react-bootstrap rather than reactstrap) by building my own set of reusable "input field" components. Here's the one for a text field:

// TextField -----------------------------------------------------------------

// Render a <Form.Group> element (from react-bootstrap) for a text input field
// that is processed by react-hook-form.  Field names MUST be unique within
// a single Form.

// External Modules ----------------------------------------------------------

import React, {ElementType} from "react";
import Col from "react-bootstrap/Col";
import Form from "react-bootstrap/Form";
import {FieldError, UseFormRegister} from "react-hook-form";

// Internal Modules ----------------------------------------------------------

// Incoming Properties -------------------------------------------------------

export interface TextFieldProps {
    as?: ElementType;                   // Render Form.Group as this component [Col]
    autoFocus?: boolean;                // This field to receive autoFocus? [false]
    className?: string;                 // CSS class(es) for the Form.Group [none]
    disabled?: boolean;                 // Disable this field? [false]
    error?: FieldError;                 // FieldError for this field [none]
    htmlSize?: number;                  // HTML size of text field [none]
    label?: string;                     // Field label [none]
    name: string;                       // Name of this field [required]
    placeholder?: string;               // Placeholder text [none]
    readOnly?: boolean;                 // Mark field as read only? [false]
    register: UseFormRegister<any>;     // register object from useForm() // NOTE - <any> ???
    type?: "date" | "hidden" | "month" | "number" | "password" | "text" | "time";
    // Input field type [text]
    valid?: string;                     // Help message for valid input [none]
}

// Component Details ---------------------------------------------------------

const TextField = (props: TextFieldProps) => {

    return (
        <Form.Group
            as={props.as ? props.as : Col}
            className={props.className ? props.className : undefined}
            controlId={props.name}
            id={props.name + "Group"}
        >
            {(props.label) ? (
                <Form.Label>{props.label}</Form.Label>
            ) : null }
            <Form.Control
                autoFocus={props.autoFocus ? props.autoFocus : undefined}
                disabled={(props.disabled !== undefined) ? props.disabled : undefined}
                htmlSize={(props.htmlSize !== undefined) ? props.htmlSize : undefined}
                isInvalid={!!props.error}
                isValid={!props.error}
                placeholder={props.placeholder ? props.placeholder : undefined}
                readOnly={(props.readOnly !== undefined) ? props.readOnly : undefined}
                type={props.type ? props.type : undefined}
                {...props.register(props.name)}
            />
            {(props.valid) ? (
                <Form.Control.Feedback type="valid">
                    {props.valid}
                </Form.Control.Feedback>
            ) : null }
            <Form.Control.Feedback type="invalid">
                {props.error?.message}
            </Form.Control.Feedback>
        </Form.Group>
    )

}

export default TextField;

This takes care of nitty gritty details like the "valid" and "invalid" related messages, without me having to deal with them in my actual forms. In an actual form, use of it looks like this:

                    <Row className="g-3 mb-3" id="nameRow">
                        <TextField
                            autoFocus={(props.autoFocus !== undefined) ? props.autoFocus : undefined}
                            error={errors.name}
                            label="Name:"
                            name="name"
                            register={register}
                            valid="Name of this Volume (must be unique within a Library)."
                        />
                    </Row>

I happen to use Yup for validations, including the "required" test - but you could easily extend the concept of this generic text field component to pass native validation criteria if you want.

[vitalijalbu]

Hmmmm too complex...

[erhanfirat]

const { Input } = require("reactstrap");

const FormInput = ({ register, name, ...rest }) => {
  const { ref, ...registerField } = register(name);

  return <Input innerRef={ref} {...registerField} {...rest} />;
};

export default FormInput;

To use it:

          <FormGroup>
            <Label>Email</Label>
            <FormInput type="email" name="email" register={register} />
            <FormFeedback>{errors.email}</FormFeedback>
          </FormGroup>

Good luck!

[yoadmash]

That works perfectly, I added a validation prop and now I can set a validation for each field.
Thank you so much for that 😊

[MohammadAttarzoghi]

but what if we have multiple Inputs in a form?

[yoadmash]

It works just fine.
As I said before, I added a validation prop and now each input has it's own validation.

[kazitanvirahsan]

ref @erhanfirat -> ref @yoadmash by passing validation for each field, I see multiple fields finally work!
const FormInput = ({ register, name, validation, ...rest }) => {
const { ref, ...registerField } = register(name, validation);
return <Input innerRef={ref} {...registerField} {...rest} />;
};

[Odigietony]

@kazitanvirahsan how is validation prop parsed in the FormInput?