Iterate#

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#

• Source code
• Docs code

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

Components#

Iterate.Array#

Iterate.Array works in many ways similar to field-components. It has a value-property that can receive an array or you can give it a path if you want it to retrieve an array from a surrounding DataContext. All children components of Iterate.Array are rendered once per item the array-value consists of.

Iterate.AnimatedContainer#

Iterate.AnimatedContainer can be used to animate items when they are added or removed.

Iterate.PushButton#

Iterate.PushButton builds on top of the same data flow logic as field components, but the only thing it changes in the value it receives or retrieves from source data is adding a new item to the array.

Iterate.PushContainer#

Iterate.PushContainer enables users to create a new item in the array.

Iterate.RemoveButton#

Iterate.RemoveButton connects to the array of a surrounding Iterate.Array and removes the item when clicked.

Iterate.ViewContainer#

Iterate.ViewContainer enables users to toggle (with animation) the content of each item between the view and edit container.

Iterate.EditContainer#

Iterate.EditContainer enables users to toggle (with animation) the content of each item between the view and edit container.

Iterate.Count#

Iterate.Count is a helper component / function that returns the count of a data array or object.

Iterate.ItemNo#

Iterate.ItemNo is a helper component that can be used to render the current item number (index) in a given string.

Iterate.Toolbar#

Iterate.Toolbar is a helper component to be used within an Iterate.AnimatedContainer to add a toolbar to each item in the array.

Iterate.Visibility#

The Iterate.Visibility component allows you to conditionally display content based on relative paths (itemPath) within an Iterate.Array component.