InlineForm

InlineForm.tsx

import React, { useState } from 'react';
import './InlineForm.css';

type InlineFormProps = {
  onSubmit: (formData: { [key: string]: string }) => void;
  fields: { name: string; label: string; type?: 'text' | 'email' | 'password' };
}

const InlineForm = ({ onSubmit, fields }: InlineFormProps) => {
  const [formData, setFormData] = useState<{ [key: string]: string }>({});

  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = event.target;
    setFormData((prevFormData) => ({ ...prevFormData, [name]: value }));
  };

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    onSubmit(formData);
  };

  return (
    <form onSubmit={handleSubmit} className="inline-form">
      {fields.map((field) => (
        <div key={field.name} className="inline-form__field">
          <label htmlFor={field.name} className="inline-form__label">
            {field.label}
          </label>
          <input
            type={field.type || 'text'}
            name={field.name}
            id={field.name}
            className="inline-form__input"
            value={formData[field.name] || ''}
            onChange={handleInputChange}
          />
        </div>
      ))}
      <button type="submit" className="inline-form__submit-btn">
        Submit
      </button>
    </form>
  );
};

export default InlineForm;

Usage

const fields = [
  { name: 'firstName', label: 'First Name' },
  { name: 'lastName', label: 'Last Name' },
  { name: 'email', label: 'Email', type: 'email' },
  { name: 'password', label: 'Password', type: 'password' },
];

const handleFormSubmit = (formData: { [key: string]: string }) => {
  console.log(formData);
};

<InlineForm onSubmit={handleFormSubmit} fields={fields} />;