react-jsonschema-form using Semantic UI without external libraries (focused mainly on array insertions and deletes)

UserDataEditor.tsx

import * as React from "react";
import {
  default as Form,
  withTheme,
  ArrayFieldTemplateProps,
  ObjectFieldTemplateProps,
} from "@rjsf/core";

const APP_DATA_SCHEMA = {
  title: "Actions and App Editor",
  description: "Easily pin Apps or add Quick Action Links",
  definitions: {
    AppDetails: {
      properties: {
        appName: {
          title: "App Name",
          type: "string",
        },
        icon: {
          title: "App Icon URL",
          type: "string",
          default: "my local image..",
        },
        url: {
          title: "App URL",
          type: "string",
        },
      },
      required: ["appName", "icon", "id", "url"],
      type: "object",
    },
    QuickActions: {
      properties: {
        title: {
          type: "string",
        },
        url: {
          type: "string",
        },
      },
      required: ["id", "title", "url"],
      type: "object",
    },
  },
  properties: {
    appList: {
      items: {
        $ref: "#/definitions/AppDetails",
      },
      title: "List of Apps",
      type: "array",
    },
    quickActions: {
      items: {
        $ref: "#/definitions/QuickActions",
      },
      title: "List of Quick Actions",
      type: "array",
    },
  },
  required: ["archive", "name", "profileImage", "userid"],
  type: "object",
};

class UserDataEditorForm extends React.Component<any, any> {
  ArrayFieldTemplate(props: ArrayFieldTemplateProps) {
    return (
      <div style={{ margin: "10px" }}>
        <h3>{props.title}</h3>
        {props.DescriptionField}

        {props.items.map((element) => (
          <div className="ui form">
            <div className="ui segment">
              {element.children}
              <div className="ui tiny icon buttons">
                <button
                  className="ui button"
                  onClick={element.onReorderClick(
                    element.index,
                    element.index - 1
                  )}
                >
                  <i className="up arrow icon"></i>
                </button>
                <button
                  className="ui button"
                  onClick={element.onReorderClick(
                    element.index,
                    element.index - 1
                  )}
                >
                  <i className="down arrow icon"></i>
                </button>
                <button
                  className="ui button"
                  onClick={element.onDropIndexClick(element.index)}
                >
                  <i className="trash icon"></i>
                </button>
              </div>
            </div>

            <div className="ui divider"></div>
          </div>
        ))}

        {props.canAdd && (
          <button
            className="ui tiny button"
            onClick={props.onAddClick}
            style={{ marginTop: "10px" }}
          >
            Add
          </button>
        )}
      </div>
    );
  }

  ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
    return (
      <div>
        {props.properties.map((element) => (
          <div className="field">{element.content}</div>
        ))}
      </div>
    );
  }

  SubmitButton() {
    return (
      <button className="ui button" type="submit">
        Submit
      </button>
    );
  }

  public render() {
    return (
      <Form
        schema={APP_DATA_SCHEMA as any}
        ArrayFieldTemplate={this.ArrayFieldTemplate}
        ObjectFieldTemplate={this.ObjectFieldTemplate}
      >
        <button className="ui button" type="submit">
          Submit
        </button>
      </Form>
    );
  }
}

export default UserDataEditorForm;

Semantic UI + React-Jsonschema-Form