Nested Object
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!