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)}

>

  <Layout.Row align="center">

    <Field.String elementPath="/" />

    <Iterate.ArrayRemoveElementButton

      icon={TrashIcon}

      onChange={(value) => console.log('onChange', value)}

    />

  </Layout.Row>

</Iterate.Array>

Object elements

Code Editor
<DataContext.Provider

  data={[

    {

      name: 'Iron Man',

    },

    {

      name: 'Captain America',

    },

    {

      name: 'Thor',

    },

  ]}

  onChange={(value) => console.log('onChange', value)}

>

  <Iterate.Array path="/">

    <Layout.Row align="center">

      <Field.String elementPath="/name" />

      <Iterate.ArrayRemoveElementButton text="Remove avenger" />

    </Layout.Row>

  </Iterate.Array>

</DataContext.Provider>

Properties

PropertyTypeDescription
textstring(optional) Button text.
childrenReactNode(optional) Alternative to text for button contents.

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.