---
title: 'DataContext.At'
description: '`DataContext.At` makes it possible to dig into a data set to set a pointer as the root for sub components, as well as iterate array-data.'
version: 11.5.2
generatedAt: 2026-06-05T08:55:37.507Z
checksum: 8a9587445730d13aaa069f93aa4a0e76d55c22df3e4141147ec1c2a767ed23ac
---

# DataContext.At

## Description

`DataContext.At` makes it possible to dig into a data set to set a pointer as the root for sub components, as well as iterate array-data.

## Relevant links

- [Source code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-eufemia/src/extensions/forms/DataContext/At)
- [Docs code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/DataContext/At)

```tsx
import { DataContext, Form, Field } from '@dnb/eufemia/extensions/forms'
render(
  <Form.Handler
    data={{
      foo: {
        one: 1,
        two: 2,
      },
      bar: 'Bar',
    }}
  >
  <DataContext.At path="/foo">
    <Field.Number path="/one" label="One" />
    <Field.Number path="/two" label="Two" />
  </DataContext.At>
</Form.Handler><DataContext.At data={existingData}>...</DataContext.At>,
)
```


## Demos

### At path


```tsx
render(<Form.Handler data={{
  foo: {
    one: 1,
    two: 2
  },
  bar: 'Bar'
}}>
        <DataContext.At path="/foo">
          <Field.Number path="/one" label="One" />
          <Field.Number path="/two" label="Two" />
        </DataContext.At>
      </Form.Handler>)
```


### Iterate path


```tsx
render(<Form.Handler data={{
  list: [{
    title: 'Object 1'
  }, {
    title: 'Object 2'
  }],
  bar: 'Bar'
}} onChange={data => console.log('onChange', data)} onPathChange={(path, value) => console.log('onPathChange', path, value)}>
        <DataContext.At path="/list" iterate>
          <Value.String path="/title" label="Title" />
          <Field.String path="/title" label="Title" />
        </DataContext.At>
      </Form.Handler>)
```

## Properties


```json
{
  "props": {
    "children": {
      "doc": "Features with given path as root for the DataContext.",
      "type": "React.ReactNode",
      "status": "optional"
    },
    "path": {
      "doc": "JSON Pointer path to where in the outer DataContext source to point at.",
      "type": "string",
      "status": "optional"
    },
    "iterate": {
      "doc": "True to iterate elements at given path based on the source data, including the index in the outer path, instead of just rendering children once.",
      "type": "boolean",
      "status": "optional"
    }
  }
}
```