Field value (return of useForm) disappear when input value change

[WMinsane]

When I change email input value, id and name of two student disappeared.
Please tell me what is wrong.

'use client';
import { getFormProps, getInputProps, useForm } from '@conform-to/react';
import { parseWithZod } from '@conform-to/zod';
import { z } from 'zod';
export default function Page() {
  const schema = z.object({
    students: z
      .object({
        id: z.number(),
        name: z.string(),
        email: z.string(),
      })
      .array(),
  });

  type schemaType = z.infer<typeof schema>;

  const testObj: schemaType = {
    students: [
      {
        id: 1,
        name: 'a',
        email: '[email protected]',
      },
      {
        id: 2,
        name: 'b',
        email: '[email protected]',
      },
    ],
  };
  const [form, fields] = useForm({
    defaultValue: testObj,
    onValidate({ formData }) {
      return parseWithZod(formData, { schema: schema });
    },
    shouldValidate: 'onBlur',
  });
  const students = fields.students.getFieldList();
  return (
    <>
      <form {...getFormProps(form)}>
        {students.map((student) => {
          const studentField = student.getFieldset();
          const { key: studendKey, ...emailFieldProps } = getInputProps(studentField.email, {
            type: 'text',
          });
          return (
            <div key={student.id}>
              id:{studentField.id.value}
              <br />
              name:{studentField.name.value}
              <br />
              email:<input {...emailFieldProps}></input>
              <br />
            </div>
          );
        })}
      </form>
    </>
  );
}

[edmundhung]

Conform does not maintain any of the value and always uses the DOM (FormData) as the source of truth. If you wanna persist the data, you will need to render a hidden input for both id and name as well, like this:

export function Example() {
  // ...

  return (
    <>
      <form {...getFormProps(form)}>
        {students.map((student) => {
          const studentField = student.getFieldset();
          const { key: studendKey, ...emailFieldProps } = getInputProps(studentField.email, {
            type: 'text',
          });
          return (
            <div key={student.id}>
              <input {...getInputProps(studentField.id, { type: 'hidden' })} />
              id:{studentField.id.value}
              <br />
              <input {...getInputProps(studentField.name, { type: 'hidden' })} />
              name:{studentField.name.value}
              <br />
              email:<input {...emailFieldProps}></input>
              <br />
            </div>
          );
        })}
      </form>
    </>
  );
}

[WMinsane]

It worked ! Thank you(人-)謝謝