Skip to content
Home

Count

Info
Demos
Properties

Import

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

Description

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

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


const MyComponent = () => {
  return <Iterate.Count path="/myList" />
}


render(
  <Form.Handler data={{ myList: ['foo', 'bar'] }}>
    <MyComponent />
  </Form.Handler>,
)

You can use the hook as well:

const MyComponent = () => {
  const { count } = Iterate.useCount() // id of the form is not needed when called inside a Form.Handler


  return count('/myList')
}


render(
  <Form.Handler data={{ myList: ['foo', 'bar'] }}>
    <MyComponent />
  </Form.Handler>,
)

You can also give a custom filter function to count only specific items:

<Iterate.Count path="/myList" filter={(item) => item !== 'bar'} />

Or give the hook a filter:

const MyComponent = () => {
  const { count } = Iterate.useCount()


  return count('/myList', (item) => item !== 'bar')
}

You can also count over objects:

<Form.Handler data={{ myList: { foo: 1, bar: 2 } }}>
  <Iterate.Count path="/myList" filter={([key, value]) => key !== 'bar'} />
</Form.Handler>

And you can call it outside of the context as well:

render(
  <>
    <Form.Handler id="myForm" data={{ myList: ['foo', 'bar'] }}>
      Form Content
    </Form.Handler>


    <Iterate.Count path="/myList" id="myForm" />
  </>,
)

And call it as a function as well (id is required):

const myFormId = 'unique-id' // or a function, object or React Context reference


function MyForm() {
  const count = Iterate.count({ id: myFormId, path: '/myList' })


  return (
    <Form.Handler id={myFormId} data={{ myList: ['foo', 'bar'] }}>
      <MyComponent />
    </Form.Handler>
  )
}