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
<DataContext.Provider

  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={{}}

  />

</DataContext.Provider>

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.

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.