v1 How to pass formFieldSet to components?

[jmaldon1]

We used to have the FieldSet<Schema> type that let us do:

import type { Fieldset } from "@conform-to/react";

type ComponentProps = {
  formFieldset: Fieldset<Schema>;
  required?: boolean;
};

function Container() {
  const [form, formFieldset] = useForm<Schema>({
      lastResult,
    });


  return (<Box>
  <Component formFieldset={formFieldset} />
  </Box>)
}

But now Fieldset doesn't seem to be exported. What is the alternative/recommended approach to this?

[edmundhung]

Two approaches:

// 1. Pass the form metadata down and grab the fieldset from the form
import { type FormMetadata, useForm } from '@conform-to/react';

function Container() {
  const [form] = useForm();

  return (
    <Component form={form} />
  );
}

function Component({ form }: { form: FormMetadata<Schema> }) {
  const fieldset = form.getFieldset();

  // ...
}

// 2. Pass the name down and call the useField hook if you use FormProvider
import { type FieldName, FormProvider, useForm, useField } from '@conform-to/react';

function Container() {
  const [form] = useForm();

  return (
    <FormProvider context={form.context}>
      <Component name={form.name} />
    </FormProvider>
  );
}

function Component({ name }: { name: FieldName<Schema> }) {
  const [meta] = useField(name);
  const fieldset = meta.getFieldset();

  // ...
}