Skip to content
Home

PushButton

Info
Demos
Properties

Import

import { Iterate } from '@dnb/eufemia/extensions/forms'
render(<Iterate.PushButton />)

Description

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

import { Iterate, Form, Field } from '@dnb/eufemia/extensions/forms'


render(
  <Form.Handler>
    <Iterate.Array path="/myList">
      <Field.Name.Last itemPath="/name" />
    </Iterate.Array>


    <Iterate.PushButton
      path="/myList"
      text="Add another item"
      pushValue={{}}
    />
  </Form.Handler>,
)

In order to create new items you can also use the Iterate.PushContainer component.

Show the next item number in the button

You can use the {nextItemNo} variable in the text or children property to display the next item number.

import { Iterate, Field, Value } from '@dnb/eufemia/extensions/forms'


render(
  <Form.Handler>
    <Iterate.Array path="/myList">
      <Field.String itemPath="/" />
    </Iterate.Array>


    <Iterate.PushButton
      path="/myList"
      pushValue="push value"
      text="Add no. {nextItemNo}"
    />
  </Form.Handler>,
)