Example of FormField component

FormField.tsx

import { HTMLInputTypeAttribute, HTMLAttributes } from "react";
import { Form } from "react-bootstrap";
import { useFormContext } from "react-hook-form";
import { v4 as uuid } from "uuid";

interface IFormField {
  /**
   * The name attribute on the input field. Will be registered with
   * react-hook-form.
   */
  name: string;
  labelText?: string;
  placeholder?: string;
  isValid?: boolean;
  feedback?: string;
  /**
   * By default "text"
   */
  type?: HTMLInputTypeAttribute;
  autoFocus?: boolean;
  defaultValue?: HTMLAttributes<HTMLInputElement>["defaultValue"];
}

/**
 * A wrapper around the react-bootstrap Form.Group component. Has
 * Label, Control and Feedback.
 */
export default function FormField({
  labelText,
  placeholder,
  name,
  isValid = true,
  feedback,
  type = "text",
  autoFocus = false,
  defaultValue,
}: IFormField) {
  const htmlId = uuid();
  const { register } = useFormContext();

  const convertToIntOrUndefined = (value: string) => {
    return value === "" ? undefined : parseInt(value, 10);
  };

  const converToStringOrUndefined = (value: string) => {
    return value === "" ? undefined : value;
  };

  const transformValue = (v: string) => {
    if (type === "text") {
      return converToStringOrUndefined(v);
    } else if (type === "number") {
      return convertToIntOrUndefined(v);
    }
    return v;
  };

  return (
    <Form.Group controlId={htmlId}>
      <Form.Label>{labelText}</Form.Label>
      <Form.Control
        autoFocus={autoFocus}
        type={type}
        placeholder={placeholder}
        {...register(name, {
          setValueAs: (v) => transformValue(v),
        })}
        isValid={isValid}
        isInvalid={!isValid}
        defaultValue={defaultValue}
      />
      <Form.Control.Feedback type="invalid">{feedback}</Form.Control.Feedback>
    </Form.Group>
  );
}