Iterate.Visibility#

Import#

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

Description#

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

Relevant links#

Source code
Docs code

Fore more details, head over to the Form.Visibility component documentation.

Demos#

Basic example#

<Form.Handler
  defaultData={{
    myList: [
      {
        toggleValue: false,
      },
      {
        toggleValue: true,
      },
    ],
  }}
>
  <Iterate.Array path="/myList">
    <Field.Boolean
      label="Show content for item no. {itemNo}"
      variant="checkbox"
      itemPath="/toggleValue"
    />
    <Iterate.Visibility pathTrue="/toggleValue" animate>
      <TestElement>
        <Iterate.ItemNo>
          {'Hide and show me item no. {itemNo}'}
        </Iterate.ItemNo>
      </TestElement>
    </Iterate.Visibility>
  </Iterate.Array>
</Form.Handler>

Suggest an edit