Skip to content

Demos

Primitive elements

Code Editor
<Iterate.Array
  value={['One', 'Two', 'Three', 'Four', 'Five']}
  onChange={(value) => console.log('onChange', value)}
>
  <Flex.Horizontal align="center">
    <Field.String elementPath="/" />
    <Iterate.ArrayRemoveElementButton
      icon={TrashIcon}
      onChange={(value) => console.log('onChange', value)}
    />
  </Flex.Horizontal>
</Iterate.Array>

Object elements

Code Editor
<Form.Handler
  data={[
    {
      name: 'Iron Man',
    },
    {
      name: 'Captain America',
    },
    {
      name: 'Thor',
    },
  ]}
  onChange={(value) => console.log('onChange', value)}
>
  <Iterate.Array path="/">
    <Flex.Horizontal align="center">
      <Field.String elementPath="/name" />
      <Iterate.ArrayRemoveElementButton text="Remove avenger" />
    </Flex.Horizontal>
  </Iterate.Array>
</Form.Handler>