[Remix+Zod] How to deal with a user-managed array of objects?

[halljus]

I have a form with a few normal/flat fields, but one field that is an array of objects (in my Zod schema). Certain user interactions can add an object to this array, modify an exist member of the array, or remove an item from the array.

const schema = z.object({
  stuff: z.string(),
  whatever: z.string(),
  items: z
    .object({
      title: z.string({ required_error: 'Title is required' }),
      description: z.string({ required_error: 'Description is required' }),
    })
    .array(),
});

I'm currently down the following road:

• store the array of objects in React state

• requestIntent list.insert(...) when an item is added

• map over the result of useFieldList and render hidden inputs for each item like so:

  const items = useFieldList(form.ref, fields.items);

  {items.map((item) => (
      <Item key={item.id} formRef={form.ref} config={item} />
  ))}

  function Item(formRef, config) {
    const { title, description } = useFieldset(formRef, config);
    return (
      <>
        <input type="hidden" {...conform.input(title)} />
        <input type="hidden" {...conform.input(description)} />
      </>
    );
  }

I was about to move on to implementing updates and deletes, but this feels a bit off for some reason and I wanted to check and see if there might be a better approach to the concept of managing a dynamic array of objects to be submitted when using Conform.

Am I on the right track, or is there a better/more idiomatic way?

---

P.S., requestIntent seems to be trigger client-side validation (onValidate gets called), which I don't want to happen when they just add/edit/remove an item. Is there a way to prevent this?

[edmundhung]

I guess your are dealing with multiple select like dropdown that managing the items here. Since this wont be supported without JS anyway, it's fine to just pass the array to the server as a JSON:

// Assume you are managing the state in useState()
const [items, setItems] = useState(...)

// Just send the array to the server as a JSON
<input type="hidden" name={fields.items} value={JSON.stringify(items)} />

// Then parse the JSON in your zod schema through a preprocess
const schema = z.object({
  // ...
  items: z.preprocess(
    value => JSON.parse(value),
    z
      .object({
        title: z.string({ required_error: 'Title is required' }),
        description: z.string({ required_error: 'Description is required' }),
      })
      .array()
      .min(1, 'Please select at least 1 items'),
});

One thing to note here is that Conform map zod errors based on its internal path. If the title of the first item is missing, the required message wont show up on your fields.items.errors as it maps to items instead of items[0].title. But it would capture the Please select at least 1 items message correctly. This shouldn't be an issue for most of the case as it won't be useful either if you try to display the Title is required message without addtional details on which item etc.

[halljus]

This is much better than what I was doing, thank you.

[adaboese]

Following these instructions, name becomes [object Object] (<input name="[object Object]" type="hidden" value="[{&quot;keyword&quot;:&quot;polar bear insulation&quot;}]">). What am I doing wrong?

const FormDataZodSchema = z.object({
  keywords: z.preprocess(
    (value) => JSON.parse(value as string),
    z
      .object({
        keyword: z.string(),
      })
      .array(),
  ),
});

const [form, fields] = useForm({
  defaultValue: {},
  lastSubmission: fetcher.data,
  onValidate({ formData }) {
    return parse(formData, { schema: FormDataZodSchema });
  },
});

<input
  name={fields.keywords}
  type="hidden"
  value={JSON.stringify(selectedKeywords)}
/>

[adaboese]

Presumably the example is missing .name?

[edmundhung]

Yes. That's a typo. It should be fields.items.name