Skip to content
Home

ArrayRemoveElementButton

Info
Demos
Properties
Events

Description

Iterate.ArrayRemoveElementButton connects to the array of a surrounding Iterate.Array and removes the element when clicked.

Demos

Primitive elements

Code Editor
<Iterate.Array
  value={['One', 'Two', 'Three', 'Four', 'Five']}
  onChange={(value) => console.log('onChange', value)}
>
  <Flex.Horizontal align="center">
    <Field.String elementPath="/" />
    <Iterate.ArrayRemoveElementButton
      icon={TrashIcon}
      onChange={(value) => console.log('onChange', value)}
    />
  </Flex.Horizontal>
</Iterate.Array>

Object elements

Code Editor
<Form.Handler
  data={[
    {
      name: 'Iron Man',
    },
    {
      name: 'Captain America',
    },
    {
      name: 'Thor',
    },
  ]}
  onChange={(value) => console.log('onChange', value)}
>
  <Iterate.Array path="/">
    <Flex.Horizontal align="center">
      <Field.String elementPath="/name" />
      <Iterate.ArrayRemoveElementButton text="Remove avenger" />
    </Flex.Horizontal>
  </Iterate.Array>
</Form.Handler>

Properties

PropertyTypeDescription
textstring(optional) Button text.
childrenReactNode(optional) Alternative to text for button contents.
ButtonVarious(optional) all button properties.
SpaceVarious(optional) spacing properties like top or bottom are supported.

Events

EventDescription
onChange(optional) Will be called on value changes made by the user, with the new value as argument.
onFocus(optional) Will be called when the component gets into focus. Like clicking inside a text input or opening a dropdown. Called with active value as argument.
onBlur(optional) Will be called when the component stop being in focus. Like when going to next field, or closing a dropdown. Called with active value as argument.