2.2 NestedFields

Provides context for nesting inputs.

import { NestedFields } from 'use-inertia-form'

const user = {
  firstName: 'Finn',
  preferences: {
    princess: 'Bubblegum',
    sword: 'Scarlet'
  }
}

const PageWithFormOnIt = () => {
  return (
    <Form model="user" data={ { user } } to={ `users/${user.id}` } method="patch">
      <TextInput name="firstName" label="First Name" />

      {/* Create a nested model context of `form.data.user.preferences` */}
      <NestedFields model="preferences">

        {/* This input would sync to `form.data.user.preferences.princess` */}
        <TextInput name="princess" label="Favorite Princess" />

        {/* And this would sync to `form.data.user.preferences.sword` */}
        <TextInput name="sword" label="Favorite Sword" />

      </NestedFields>
    </Form>
  )
}