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(人-)謝謝

[brunobely]

@edmundhung is there a canonical way to prevent the user from changing those values in the DOM manually (say via DevTools)? Or is verifying those values (perhaps in onValidate on the client? or can that be easily bypassed by a bad actor?) before submitting the way?