Function useListEditor

Creates a list editor that allows adding, updating, and removing items.

  • useListEditor<Data>(renderItem, options): {
        items: Data[];
        onAddItem: ((data: Data) => number);
        onRemoveItem: ((id: number) => void);
        onUpdateItem: ((id: number, data: Data) => void);
        render: (() => Element);
    }

  • Type Parameters

    • Data extends unknown = undefined

      The type of data for each item in the list.

    Parameters

    • renderItem: ((id: number, item: Data) => ReactElement<any, string | JSXElementConstructor<any>>)

      The function that renders each item in the list.

        • (id, item): ReactElement<any, string | JSXElementConstructor<any>>

        • Parameters

          • id: number
          • item: Data

          Returns ReactElement<any, string | JSXElementConstructor<any>>

    • options: {
          initialValue?: Data[];
          onChange?: ((items: Data[]) => void);
      }

      The options for the list editor.

      • OptionalinitialValue?: Data[]

        The initial list of items.

      • OptionalonChange?: ((items: Data[]) => void)

        The callback function called when the list of items changes.

          • (items): void

          • Parameters

            Returns void

    Returns {
        items: Data[];
        onAddItem: ((data: Data) => number);
        onRemoveItem: ((id: number) => void);
        onUpdateItem: ((id: number, data: Data) => void);
        render: (() => Element);
    }

    An object with the following properties and methods:

    • onAddItem: a function that adds a new item to the list.
    • onUpdateItem: a function that updates an item in the list.
    • onRemoveItem: a function that removes an item from the list.
    • items: an array of the current items in the list.
    • render: a function that renders the list of items.
    • items: Data[]
    • onAddItem: ((data: Data) => number)
        • (data): number

        • Adds an item to the collection.

          Parameters

          • data: Data

            The data of the item to be added.

          Returns number

          • The generated ID of the added item.
    • onRemoveItem: ((id: number) => void)
        • (id): void

        • Removes an item from the items map using the given ID.

          Parameters

          • id: number

            The ID of the item to be removed.

          Returns void

    • onUpdateItem: ((id: number, data: Data) => void)
        • (id, data): void

        • Updates an item in the collection.

          Parameters

          • id: number

            The ID of the item to be updated.

          • data: Data

            The updated data for the item.

          Returns void

    • render: (() => Element)
        • (): Element

        • Renders a list of items using the renderItem function.

          Returns Element

          The rendered list of items.

Settings

Member Visibility