From bcba6db5229bde32ed17cbcd4688434a6e1f8867 Mon Sep 17 00:00:00 2001
From: jrangel <jeremy@jeremyrangel.com>
Date: Wed, 8 Jan 2025 23:27:03 +0000
Subject: [PATCH] Initial

Example usage

import React from 'react';
import ReactDOM from 'react-dom';
import LCPFormRepeater from './LCPFormRepeater';

const App = () => {
  // Define the fields structure in JSON format
  const fields = [
    { type: 'text', label: 'Name', placeholder: 'Enter your name' },
    { type: 'email', label: 'Email', placeholder: 'Enter your email' },
    { type: 'number', label: 'Age', placeholder: 'Enter your age' },
    { type: 'textarea', label: 'Message', placeholder: 'Enter your message' },
  ];

  // Define the submit callback
  const handleFormSubmit = (formData) => {
    console.log('Form submitted with data:', formData);
  };

  return (
    <div>
      <h1>LCP Form Repeater Example</h1>
      <LCPFormRepeater fields={fields} onSubmit={handleFormSubmit} />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));
---
 components/LCPFormRepeater/LCPFormRepeater.js | 67 +++++++++++++++++++
 1 file changed, 67 insertions(+)
 create mode 100644 components/LCPFormRepeater/LCPFormRepeater.js

diff --git a/components/LCPFormRepeater/LCPFormRepeater.js b/components/LCPFormRepeater/LCPFormRepeater.js
new file mode 100644
index 0000000..3500b46
--- /dev/null
+++ b/components/LCPFormRepeater/LCPFormRepeater.js
@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+
+const LCPFormRepeater = ({ fields, onSubmit }) => {
+  const [formData, setFormData] = useState(
+    fields.map(() => ({
+      value: '', // Initialize empty value for each field
+    }))
+  );
+
+  // Handle input field change
+  const handleChange = (index, event) => {
+    const updatedData = [...formData];
+    updatedData[index].value = event.target.value;
+    setFormData(updatedData);
+  };
+
+  // Handle form submission
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    onSubmit(formData); // Call the passed in onSubmit callback with the form data
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      {fields.map((field, index) => (
+        <div key={index} className="form-field">
+          {/* Render the corresponding input field based on the field type */}
+          <label>{field.label}</label>
+          {field.type === 'text' && (
+            <input
+              type="text"
+              value={formData[index].value}
+              onChange={(e) => handleChange(index, e)}
+              placeholder={field.placeholder}
+            />
+          )}
+          {field.type === 'number' && (
+            <input
+              type="number"
+              value={formData[index].value}
+              onChange={(e) => handleChange(index, e)}
+              placeholder={field.placeholder}
+            />
+          )}
+          {field.type === 'email' && (
+            <input
+              type="email"
+              value={formData[index].value}
+              onChange={(e) => handleChange(index, e)}
+              placeholder={field.placeholder}
+            />
+          )}
+          {field.type === 'textarea' && (
+            <textarea
+              value={formData[index].value}
+              onChange={(e) => handleChange(index, e)}
+              placeholder={field.placeholder}
+            />
+          )}
+        </div>
+      ))}
+      <button type="submit">Submit</button>
+    </form>
+  );
+};
+
+export default LCPFormRepeater;