formfield shadcn render arraylist

Splendid Seahorse answered on August 2, 2024 Popularity 1/10 Helpfulness 1/10

answer formfield shadcn render arraylist

formfield shadcn render arraylist

Comment

<div className="mb-10">
  <h2 className="mb-2 text-xl font-semibold">
    Can you list the key steps you need to take?
  </h2>
  <div className="flex flex-col gap-2">
    {stepFields.map((field, i) => (
      <FormField
        key={field.id}
        name={`steps[${i}].title`}
        render={() => (
          <FormItem>
            <div className="flex gap-2">
              <Button variant={"ghost"} onClick={() => removeStep(i)}>
                <LuTrash2 className="h-5 w-5" />
              </Button>
              <FormControl>
                <div className="flex w-full gap-2">
                  <Input
                    {...form.register(`steps.${i}.title`, {
                      required: true,
                    })}
                    placeholder={`Step ${i + 1}`}
                    className="w-full bg-zinc-50 p-2"
                  />
                  <Input
                    {...form.register(`steps.${i}.date`, {
                      required: true,
                    })}
                    type="date"
                  />
                </div>
              </FormControl>
            </div>
          </FormItem>
        )}
      />
    ))}
    <Button
      variant={"secondary"}
      className="border"
      onClick={() => addStep({ title: "", date: "" })}
      type="button"
    >
      Add step
    </Button>
  </div>
</div>;

Popularity 1/10 Helpfulness 1/10 Language typescript

Source: stackoverflow.com

Tags: arraylist formfield render typescript

Link to this answer
Share Copy Link