Nested Object

Loading "Grouping and Managing Related Fields in Form Objects"

Grouping and Managing Related Fields in Form Objects

So far we've just put the image information as properties on our NoteEditorSchema, but the id, file, and altText fields are really all just part of a single object: An image. So it would be better to represent this as a nested set of field properties under the NoteEditorSchema under image.

However, because forms don't support nested objects, we'll need to use a utility from Conform to help us out. Here's an example that resembles what you'll be doing:

// example inspired from the Conform docs
import {
	useForm,
	useFieldset,
	conform,
	type FieldConfig,
} from '@conform-to/react'

function Example() {
	const [form, fields] = useForm<Schema>({
		// ... config stuff including the schema
	})

	return (
		<form {...form.props}>
			<AddressFields config={fields.address} />
		</form>
	)
}

function AddressFields({ config }: { config: FieldConfig<Address> }) {
	const ref = useRef<HTMLFieldSetElement>(null)
	const fields = useFieldset(ref, config)
	return (
		<fieldset ref={ref}>
			<input {...conform.input(fields.street)} />
			<input {...conform.input(fields.zipcode)} />
			<input {...conform.input(fields.city)} />
			<input {...conform.input(fields.country)} />
		</fieldset>
	)
}

We'll also get our type by using Zod's inference utility:

const RocketSchema = z.object({
	// ...
})
type RocketType = z.infer<typeof RocketSchema>

function RocketFields({ config }: { config: FieldConfig<RocketType> }) {
	// ...
}

So, fundamentally, we want to make this change:

{
	title: string
	content: string
	imageId: string
	file: File
	altText: string
	image: {
		id: string
		file: File
		altText: string
	}
}

And we want that hooked up to our form. That should be enough to get you going!

05. Complex Structures/01. Nested Object (💪 problem)

Nested Object