SharePoint Framework カスタムプロパティに繰り返し項目を作成する

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version ,Guid} from '@microsoft/sp-core-library';
import {
  type IPropertyPaneConfiguration,
  PropertyPaneTextField,
  PropertyPaneButton,
  PropertyPaneButtonType
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart} from '@microsoft/sp-webpart-base';
import ArrayProperty from './components/ArrayProperty';
import { IArrayPropertyProps } from './components/IArrayPropertyProps';
export interface IArrayPropertyWebPartProps {
  inputs: { id: string; input: string; }[];
}

export default class ArrayPropertyWebPart extends BaseClientSideWebPart<iarraypropertywebpartprops> {

  public render(): void {
    const element: React.ReactElement = React.createElement(
      ArrayProperty, {inputs: this.properties.inputs,}
    );
    ReactDom.render(element, this.domElement);
  }

  protected onDispose(): void {
    ReactDom.unmountComponentAtNode(this.domElement);
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  
  private addInput(): void {
    const newInput = {
      id: Guid.newGuid().toString(),
      input: 'New Input'
    };
    const newInputs = [...this.properties.inputs, newInput];
    this.onChange(newInputs);
  }

    
  private removeInput(index: number): void {
    const newInputs = [...this.properties.inputs]; 
    newInputs.splice(index, 1);
    this.onChange(newInputs);
  }

  private onChange(inputs: { id: string; input: string;  }[]): void {
    this.properties.inputs = inputs;
    this.render();
  }


  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    const fields = this.properties.inputs.map((input, index) => [
      PropertyPaneTextField(input.id , {
        label: `Input Text ${index + 1}`,
        value: this.properties.inputs[index].input,
        onGetErrorMessage: (value: string) => {
          this.properties.inputs[index].input = value;
          this.render();
          return '';
        }
      }),
      PropertyPaneButton(`removeTab${input.id}`, {
        text: "Remove Input",
        buttonType: PropertyPaneButtonType.Normal,
        onClick: this.removeInput.bind(this, index)
      })
    ]).reduce((acc, val) => acc.concat(val), []);


    return {
      pages: [
        {
          header: { description: "Array Input" },
          groups: [
            {
              groupName: "入力項目",
              groupFields: [
                ...fields,
                PropertyPaneButton("addInput", {
                  text: "Add Input",
                  buttonType: PropertyPaneButtonType.Primary,
                  onClick: this.addInput.bind(this)
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

export interface IArrayPropertyProps {
  inputs: { id: string; input:string}[];
}

import * as React from 'react';
import styles from './ArrayProperty.module.scss';
import type { IArrayPropertyProps } from './IArrayPropertyProps';

const ArrayProperty: React.FC<IArrayPropertyProps> = (props) => {
  const inputList = (): JSX.Element[] => {
    return props.inputs.map((list) => <li key={list.id} >{list.id + '/' + list.input}</li>);
    }
    return (
      <section className={`${styles.arrayProperty}}`}>
        <ul>{inputList()}
       </ul>
      </section>
    );
  }
export default ArrayProperty;

gulp serve