Nested object forms
Render inputs for a nested object such as an address.
Conform · Function
getFieldset
getFieldset() returns child field metadata for a nested object. Call it on the parent field metadata; child names are inferred automatically.
How it works
getFieldset() is a method on parent field metadata for working with nested object fields. It returns a fieldset whose properties expose the child field metadata, with child names inferred from the parent path.
Syntax
fields.parent.getFieldset()Returns
A fieldset object containing metadata for the child fields of the parent nested object.
Key points
- Invoke the method on the metadata for the parent nested field.
- The result exposes child fields and automatically derives their names.
- Use
getFieldList()instead when the parent value is a list. - The two methods can be composed to model arrays containing nested objects.
Common mistakes
- Call it on the parent field metadata for a nested object; it is not a standalone import or hook.
- For nested arrays, obtain each item from
getFieldList()and then callgetFieldset()on that item.
Example: Access nested object fields
import { useForm } from '@conform-to/react';
function AddressFields() {
const [form, fields] = useForm({
defaultValue: { address: { street: '', city: '' } },
});
const address = fields.address.getFieldset();
return (
<form {...form.props}>
<input name={address.street.name} defaultValue={address.street.initialValue} />
<input name={address.city.name} defaultValue={address.city.initialValue} />
</form>
);
}Call the parent field metadata's method to access metadata for each child field in a nested object.
When to use it
Nested arrays
Render object fields inside a repeated list item.
Inferred field names
Avoid manually assembling names for child fields.
Interview questions
QWhat problem does getFieldset() solve?
getFieldset() is called on a parent field metadata object to expose the fields inside a nested object. The returned fieldset provides child metadata as properties, and Conform infers each child's name from the parent path.
Follow-up: How would you handle a nested array of objects? Call getFieldList() on the array field, then call getFieldset() on each item fieldset.
QHow are child field names determined?
It gives direct access to child field metadata for a nested object, so inputs can use the inferred child names without manually constructing nested paths. This keeps the form rendering aligned with Conform's metadata model.
Follow-up: What is the corresponding API for a list rather than an object? Use getFieldList() on the parent list field.
QHow do you render an array of nested objects?
For each array item, first retrieve the item metadata with getFieldList(). Then call that item's getFieldset() to access the fields of the nested object.
Follow-up: Can these APIs be combined more than one level deep? Yes; the documentation describes combining getFieldset() and getFieldList() for nested arrays.
Related
getFieldListuseFormFieldset