More improvements to form controls with bootstrap 5

src/utils/forms/FormGroupContainer.tsx

@@ -1,36 +0,0 @@
-import { FC, useRef } from 'react';
-import { v4 as uuid } from 'uuid';
-import { InputType } from 'reactstrap/types/lib/Input';
-import { FormGroup } from 'reactstrap';
-
-export interface FormGroupContainerProps {
-  value: string;
-  onChange: (newValue: string) => void;
-  id?: string;
-  type?: InputType;
-  required?: boolean;
-  placeholder?: string;
-  className?: string;
-  labelClassName?: string;
-}
-
-export const FormGroupContainer: FC<FormGroupContainerProps> = (
-  { children, value, onChange, id, type, required, placeholder, className, labelClassName = '' },
-) => {
-  const forId = useRef<string>(id ?? uuid());
-
-  return (
-    <FormGroup className={className ?? ''}>
-      <label htmlFor={forId.current} className={`form-label ${labelClassName}`}>{children}:</label>
-      <input
-        className="form-control"
-        type={type ?? 'text'}
-        id={forId.current}
-        value={value}
-        required={required ?? true}
-        placeholder={placeholder}
-        onChange={(e) => onChange(e.target.value)}
-      />
-    </FormGroup>
-  );
-};

src/utils/forms/InputFormGroup.tsx

@@ -0,0 +1,29 @@
+import { FC } from 'react';
+import { InputType } from 'reactstrap/types/lib/Input';
+import { LabeledFormGroup } from './LabeledFormGroup';
+
+export interface InputFormGroupProps {
+  value: string;
+  onChange: (newValue: string) => void;
+  id?: string;
+  type?: InputType;
+  required?: boolean;
+  placeholder?: string;
+  className?: string;
+  labelClassName?: string;
+}
+
+export const InputFormGroup: FC<InputFormGroupProps> = (
+  { children, value, onChange, type, required, placeholder, className, labelClassName },
+) => (
+  <LabeledFormGroup label={<>{children}:</>} className={className ?? ''} labelClassName={labelClassName}>
+    <input
+      className="form-control"
+      type={type ?? 'text'}
+      value={value}
+      required={required ?? true}
+      placeholder={placeholder}
+      onChange={(e) => onChange(e.target.value)}
+    />
+  </LabeledFormGroup>
+);

src/utils/forms/LabeledFormGroup.tsx

@@ -0,0 +1,17 @@
+import { FC, ReactNode } from 'react';
+
+interface LabeledFormGroupProps {
+  label: ReactNode;
+  noMargin?: boolean;
+  className?: string;
+  labelClassName?: string;
+}
+
+export const LabeledFormGroup: FC<LabeledFormGroupProps> = (
+  { children, label, className = '', labelClassName = '', noMargin = false },
+) => (
+  <div className={`${className} ${noMargin ? '' : 'mb-3'}`}>
+    <label className={`form-label ${labelClassName}`}>{label}</label>
+    {children}
+  </div>
+);