Skip to content
Home

Iterate

Info
Demos
Components

Import

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

Description

Iterate is a set of components and functionality designed for traversing values and parts of data sets, such as arrays.

It is particularly useful when dealing with data that contains a varying number of items, as the number of components on the screen depends on the number of items in the data.

Relevant links

Usage

  1. Define a value property with an array of items you want to iterate over. This can be a list of strings, objects, or any other type of data.
  2. Put Field.* or Values.* with an itemPath inside.
import { Iterate, Field } from '@dnb/eufemia/extensions/forms'


render(
  <Iterate.Array value={['foo', 'bar']} onChange={console.log}>
    <Field.String itemPath="/" />
  </Iterate.Array>,
)

You can also iterate over objects and easily integrate it with the Form.Handler data handling, as shown in the example below:

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


render(
  <Form.Handler
    defaultData={{
      listOfHeroes: [
        { name: 'Iron Man' },
        { name: 'Captain America' },
        { name: 'The Hulk' },
      ],
    }}
    onChange={console.log}
  >
    <Iterate.Array path="/listOfHeroes">
      <Field.Name.Last itemPath="/name" />
    </Iterate.Array>
  </Form.Handler>,
)