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

Demos

Primitive items

Code Editor
<Form.Handler>
  <Flex.Stack>
    <Iterate.Array path="/">
      <Value.String itemPath="/" />
    </Iterate.Array>
    <Iterate.PushButton text="Add another item" path="/" pushValue="new" />
  </Flex.Stack>
</Form.Handler>

Object items

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

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