Skip to content

Commit

Permalink
added onSubmit property
Browse files Browse the repository at this point in the history
  • Loading branch information
KirillSBarsukov committed Sep 28, 2024
1 parent dffb304 commit 615dfb2
Showing 1 changed file with 24 additions and 29 deletions.
53 changes: 24 additions & 29 deletions docs/intent-button.md
Original file line number Diff line number Diff line change
Expand Up @@ -135,42 +135,37 @@ Be aware that both intents requires setting up the inputs with the **key** from
To manipulate a field list, you can use the **insert**, **remove** and **reorder** intents.

```tsx
import { useForm, getFormProps, getInputProps } from '@conform-to/react';
import { useForm } from '@conform-to/react';

export default function Tasks() {
const [form, fields] = useForm();
const tasks = fields.tasks.getFieldList();

return (
<form {...getFormProps(form)}>
<form id={form.id} onSubmit={form.onSubmit}>
<ul>
{tasks.map((task, index) => {
const taskFields = task.getFieldset();
return (
<li key={task.key}>
<fieldset {...getFieldsetProps(task)}>
<input {...getInputProps(taskFields.content, { type: "text" })} />
<button
{...form.reorder.getButtonProps({
name: fields.tasks.name,
from: index,
to: 0,
})}
>
Move to top
</button>
<button
{...form.remove.getButtonProps({
name: fields.tasks.name,
index,
})}
>
Delete
</button>
</fieldset>
</li>
)
})}
{tasks.map((task, index) => (
<li key={task.key}>
<input name={task.name} />
<button
{...form.reorder.getButtonProps({
name: fields.tasks.name,
from: index,
to: 0,
})}
>
Move to top
</button>
<button
{...form.remove.getButtonProps({
name: fields.tasks.name,
index,
})}
>
Delete
</button>
</li>
))}
</ul>
<button
{...form.insert.getButtonProps({
Expand Down

0 comments on commit 615dfb2

Please sign in to comment.