@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
110 lines (98 loc) • 2.38 kB
Markdown
---
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: 10.104.0
generatedAt: 2026-04-17T18:46:12.221Z
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.
```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"
}
}
}
```