dynamicreactform.js

import React, { useState } from "react";
import "./App.css";

function App() {
  const [form, setForm] = useState([]);
  const [submitted, setFormSubmitted] = useState(false);

  const someEmpty = form.some(
    (item) => item.Platform === "" || item.Username === ""
  );

  const previousValid = () => {
    if (form.length === 0) {
      return true;
    }

    if (someEmpty) {
      form.map((item, index) => {
        const allprev = [...form];
        if (form[index].Platform === "") {
          allprev[index].errors.Platform = "Platform is required";
        }
        if (form[index].Username === "") {
          allprev[index].errors.Username = "Username is required";
        }
        if (form[index].Username !== "") {
          allprev[index].errors.Username = null;
        }
        if (form[index].Platform !== "") {
          allprev[index].errors.Platform = null;
        }

        setForm(allprev);
      });
    }

    return !someEmpty;
  };

  const handleField = (e) => {
    e.preventDefault();

    if (previousValid()) {
      setForm((prev) => [
        ...prev,
        {
          Platform: "",
          Username: "",
          errors: { Platform: null, Username: null },
        },
      ]);
    }
  };

  const handleRemoveField = (e, index) => {
    e.preventDefault();
    setForm((prev) => prev.filter((item) => item !== prev[index]));
  };

  const onChange = (e, i) => {
    e.persist();
    e.preventDefault();
    e.stopPropagation();

    setForm((prev) =>
      prev.map((item, index) => {
        if (index !== i) {
          return item;
        }

        return {
          ...item,
          [e.target.name]: e.target.value,
          errors: {
            ...item.errors,
            [e.target.name]:
              e.target.value.length > 0
                ? null
                : [e.target.name] + " is required",
          },
        };
      })
    );
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    if (!someEmpty) {
      setFormSubmitted(true);
    }
  };

  return (
    <div className="container mt-5 py-5">
      {!submitted && (
        <>
          {" "}
          <h4>Links</h4>
          <p>Add links to sites you want to share with your viewers</p>
          <pre>{JSON.stringify(form)}</pre>
          <form autoComplete="off">
            {Array.isArray(form) &&
              form.map((item, index) => (
                <div className="row mt-3" key={`inputField~${index}`}>
                  <div className="col">
                    <input
                      type="text"
                      className={
                        item.errors.Platform
                          ? "form-control is-invalid"
                          : "form-control"
                      }
                      name="Platform"
                      value={item.Platform}
                      onChange={(e) => {
                        onChange(e, index);
                      }}
                      placeholder="Platform"
                    />
                    <div className="invalid-feedback">
                      {item.errors.Platform && (
                        <small>{item.errors.Platform}</small>
                      )}
                    </div>
                  </div>
                  <div className="col">
                    <input
                      type="text"
                      name="Username"
                      onChange={(e) => {
                        onChange(e, index);
                      }}
                      className={
                        item.errors.Username
                          ? "form-control is-invalid"
                          : "form-control"
                      }
                      placeholder="Username"
                      value={item.Username}
                    />
                    <div className="invalid-feedback">
                      {item.errors.Username && (
                        <small>{item.errors.Username}</small>
                      )}
                    </div>
                  </div>
                  <button
                    className="remove btn btn-warning"
                    onClick={(e) => handleRemoveField(e, index)}
                  >
                    X
                  </button>
                </div>
              ))}
            <button
              onClick={handleField}
              className="add btn btn-primary mr-2 mt-2"
            >
              Add a link
            </button>

            {!someEmpty && (
              <button
                onClick={handleSubmit}
                className="add btn btn-secondary mr-2 mt-2"
              >
                Submit
              </button>
            )}
          </form>
        </>
      )}

      {submitted && (
        <div className="jumbotron alert alert-success">
          <h4>Your form was submitted </h4>
          Links:{" "}
          {JSON.stringify(
            form.map((item) => ({
              Platform: item.Platform,
              Username: item.Username,
            }))
          )}
        </div>
      )}
    </div>
  );
}

export default App;