Creating a field list with an initial entry

[skycoop]

I'm making a form with an array that requires at least one item, so I'd like to automatically create an initial entry before rendering the component.

I attempted to use form.insert like this, but Remix complained about it trying to access document during SSR

const slots = fields.slots.getFieldList();
if (slots.length === 0) {
  form.insert({ name: fields.slots.name });
}

When I added a check for document being defined, it then infinitely reloaded the page until my laptop ran out of RAM...

How can I add an initial item to a field list?

[marcomuser]

I would add the initial array entry as part of the defaultValue you pass to the useForm hook.

[skycoop]

Can confirm this works. I assumed that I'd need to pass actual values, but turns out it's perfectly happy getting an empty object

  const [form, fields] = useForm({
    defaultValue: { slots: [{}] },
    // ...
  });

[praneethketha]

I have the question in similar lines. What should we do If we want to push new object (entry) to the array?

[updbqn]

@praneethketha
Try:

form.insert({name: fields.slots.name, defaultValue: {}})

// or

<button
  {...form.insert.getButtonProps({
    name: fields.slots.name,
    defaultValue: {}
  })}
>
  Add slot
</button>

See Conform / Intent button