Form.useDataValue#

Import#

import { Form } from '@dnb/eufemia/extensions/forms'
// Use Form.useDataValue

Description#

Form.useDataValue(path) returns the current value at a JSON Pointer path and subscribes only to that path while used inside Form.Handler.

Use it when rendered output depends on one form data value. It rerenders when that path, a parent path or a child path changes, but not when unrelated form data or other form context state changes.

For custom field or value components, prefer useFieldProps or useValueProps for the component's own path.

Related helpers:

• Form.useData
• Form.useDataWithoutSubscription
• Form.getData

Relevant links#

• Source code
• Docs code

Usage#

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

function MyComponent() {
  const name = Form.useDataValue<string>('/customer/name')

  return <output>{name}</output>
}

render(
  <Form.Handler data={{ customer: { name: 'Ada' } }}>
    <MyComponent />
  </Form.Handler>
)

TypeScript support#

You can define the value type returned from the path.

type MyData = { firstName: string }

const MyComponent = () => {
  const firstName = Form.useDataValue<MyData['firstName']>('/firstName')

  return firstName
}

When to use it#

Use Form.useDataValue for rendered values inside Form.Handler.

Use Form.useData when rendered output depends on the whole form data object.

Use Form.useDataWithoutSubscription for non-subscribing imperative reads or writes in callbacks, effects or internal handlers.