Field Lists

๐Ÿ‘จโ€๐Ÿ’ผ We want users to be able to upload multiple images to the notes. So we're going to need to adjust our Zod config to allow for an array:
const RocketSchema = z.object({})
const RocketsSchema = z.array(RocketSchema)
This is easy enough, but remember that Forms don't support arrays. So we need to reach for Conform's utilities to make this a possibility. Luckily, Conform has a handy utility called useFieldList which allows you to represent an array of fields in a Form. Here's the example from the Conform docs:
import { useForm, useFieldList, list } from '@conform-to/react'

/**
 * Consider the schema as follows:
 */
type Schema = {
	items: string[]
}

function Example() {
	const [form, { items }] = useForm<Schema>()
	const itemsList = useFieldList(form.ref, items)

	return (
		<fieldset ref={ref}>
			{itemsList.map((item, index) => (
				<div key={item.key}>
					{/* Setup an input per item */}
					<input name={item.name} />

					{/* Error of each item */}
					<span>{item.error}</span>

					{/* Setup a delete button (Note: It is `items` not `item`) */}
					<button {...list.remove(items.name, { index })}>Delete</button>
				</div>
			))}

			{/* Setup a button that can append a new row with optional default value */}
			<button {...list.insert(items.name, { defaultValue: '' })}>add</button>
		</fieldset>
	)
}
You'll notice the list utilities in there. We'll get to that in the next step. For now, just focus on getting the useFieldList working for our images.

Access Denied

You must login or register for the workshop to view and run the tests.

Check out this video to see how the test tab works.