Iterate.Count#

<Form.Handler
  data={{
    myList: ['foo', 'bar'],
  }}
>
  <Iterate.Count path="/myList" />
</Form.Handler>

const MyPushButton = () => {
  const { count } = Iterate.useCount()
  return (
    <Iterate.PushButton
      path="/myList"
      pushValue={() => {
        return (
          Iterate.count({
            id: 'myForm',
            path: '/myList',
          }) + 1
        )
      }}
      top
    >
      Add item nr. {count('/myList') + 1}
    </Iterate.PushButton>
  )
}
const MyForm = () => {
  return (
    <Form.Handler
      id="myForm"
      data={{
        myList: [1, 2],
      }}
    >
      <output>
        Total: <Iterate.Count path="/myList" />
      </output>

      <Iterate.Array path="/myList">
        <Iterate.AnimatedContainer gap={false}>
          <Flex.Horizontal align="center">
            <strong>
              <Value.Number itemPath="/" />
            </strong>
            <Iterate.RemoveButton />
          </Flex.Horizontal>
        </Iterate.AnimatedContainer>
      </Iterate.Array>

      <MyPushButton />
    </Form.Handler>
  )
}
render(<MyForm />)