Skip to content
Home

At

Info
Demos
Properties

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.

Demos

At path

<DataContext.Provider

  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>

</DataContext.Provider>

Iterate path

Object 1
Object 2
<DataContext.Provider

  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>

</DataContext.Provider>

Properties

PropertyTypeDescription
childrenReact.Node(optional) Features with given path as root for the DataContext.
pathstring(optional) JSON Pointer path to where in the outer DataContext source to point at.
iterateboolean(optional) 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.