Skip to content
Home

setData

Info
Demos

Import

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

Description

With the Form.setData method, you can manage your form data outside of the form itself. This is beneficial when you need to utilize the form data in other places within your application:

Related helpers:

Replace the whole data set

When a value is given to the setData function, the whole data set will be replaced.

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


const myFormId = 'unique-id' // or a function, object or React Context reference


Form.setData('unique', { foo: 'bar' })


function MyForm() {
  return (
    <Form.Handler id={myFormId}>
      <Field.String path="/foo" />
    </Form.Handler>
  )
}

Update a single value

You can use the update function to update the data.

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


const myFormId = 'unique-id' // or a function, object or React Context reference
const { update } = Form.setData(myFormId)


function MyForm() {
  return (
    <Form.Handler id={myFormId}>
      <Field.Number path="/foo" defaultValue={0} />
    </Form.Handler>
  )
}


// Call "update" with the path and the new value.
update('/foo', 1)


// Or with a function that gives you the current value, if any.
update('/foo', (value) => {
  if (typeof value === 'number') {
    return value + 1
  }
  return 1
})

Demos

Set data outside of the form

Code Editor
Form.setData('default-id', {
  foo: 'bar',
})
const Component = () => {
  return (
    <Form.Handler id="default-id">
      <Field.String path="/foo" />
    </Form.Handler>
  )
}
render(<Component />)

Set data after first render

Code Editor
const Component = () => {
  return (
    <Form.Handler id="after-id">
      <Field.String path="/foo" />
    </Form.Handler>
  )
}
Form.setData('after-id', {
  foo: 'bar',
})
render(<Component />)

Using the update function

Code Editor
const myFormId = {}
const { update } = Form.setData(myFormId)
const Component = () => {
  return (
    <Form.Card>
      <Form.Handler id={myFormId}>
        <Field.Number path="/foo" defaultValue={1} />
      </Form.Handler>
      <Button
        onClick={() => {
          update('/foo', (count) => count + 1)
        }}
      >
        Update
      </Button>
    </Form.Card>
  )
}
render(<Component />)