Skip to content
Home

ArrayPushButton

Info
Demos
Properties
Events

Description

Iterate.ArrayPushButton connects to the array of a surrounding Iterate.Array or an array from the source pointed at through path and adds a new element to the array when clicked.

Demos

Primitive elements

Code Editor
<Iterate.ArrayPushButton
  text="Add another element"
  value={['foo', 'bar']}
  pushValue="new"
  onChange={(value) => console.log('onChange', value)}
/>

Object elements

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

  <Iterate.ArrayPushButton
    top="small"
    text="Add another element"
    path="/"
    pushValue={{}}
  />
</Form.Handler>

Properties

PropertyTypeDescription
textstring(optional) Button text.
pushValueunknown(optional) The element to add to the array when the button is clicked.
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.