show data in form

hi I use the useForm hook to get the dataand I present it using

{...register("description")}

{...register("description")}

so this let me to present normal data like string number but in case I want to present a list like products, how I can present list and edit the changes

  const {
      refineCore: { onFinish, formLoading },
      register,
      handleSubmit,
  } = useForm();

        <TextareaAutosize
          style={{
            width: "100%",
            background: "transparent",
            fontSize: "16px",
            borderColor: "rgba(0,0,0,0.23)",
            borderRadius: 6,
            padding: 10,
            color: "#919191", 
            direction: 'rtl', 
            unicodeBidi: 'plaintext'
          }}
          minRows={5}
          color="primary"
          id="outlined-basic"
          {...register("description")}
        />

  const {
      refineCore: { onFinish, formLoading },
      register,
      handleSubmit,
  } = useForm();

        <TextareaAutosize
          style={{
            width: "100%",
            background: "transparent",
            fontSize: "16px",
            borderColor: "rgba(0,0,0,0.23)",
            borderRadius: 6,
            padding: 10,
            color: "#919191", 
            direction: 'rtl', 
            unicodeBidi: 'plaintext'
          }}
          minRows={5}
          color="primary"
          id="outlined-basic"
          {...register("description")}
        />

2 Replies

kapa.ai•11mo ago

Hi @the_grateful. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To handle a list of items like products in a form, you can use the useFieldArray hook from React Hook Form. This hook allows you to easily manage fields arrays in your form. Unfortunately, the provided extracts do not contain specific examples of using useFieldArray with refine's useForm hook. However, you can refer to the React Hook Form documentation (https://react-hook-form.com/api/usefieldarray) for more details on how to use useFieldArray. Here's a general idea of how you can use it:

import { useForm, useFieldArray } from "@refinedev/react-hook-form";

const { 
  refineCore: { onFinish, formLoading },
  control,
  register,
  handleSubmit,
} = useForm();

const { fields, append, remove } = useFieldArray({
  control,
  name: "products"
});

return (
  <form onSubmit={handleSubmit(onFinish)}>
    {fields.map((item, index) => (
      <div key={item.id}>
        <input {...register(`products.${index}.name`)} />
        <button onClick={() => remove(index)}>Remove</button>
      </div>
    ))}
    <button onClick={() => append({ name: "" })}>Add</button>
  </form>
);

import { useForm, useFieldArray } from "@refinedev/react-hook-form";

const { 
  refineCore: { onFinish, formLoading },
  control,
  register,
  handleSubmit,
} = useForm();

const { fields, append, remove } = useFieldArray({
  control,
  name: "products"
});

return (
  <form onSubmit={handleSubmit(onFinish)}>
    {fields.map((item, index) => (
      <div key={item.id}>
        <input {...register(`products.${index}.name`)} />
        <button onClick={() => remove(index)}>Remove</button>
      </div>
    ))}
    <button onClick={() => append({ name: "" })}>Add</button>
  </form>
);

In this example, fields is an array of objects where each object represents a product. You can use the append function to add a new product to the list, and the remove function to remove a product. Each product has a name field, which you can bind to an input field using the register function. Please note that this is a general guide and the actual implementation may vary depending on your specific requirements and the structure of your application. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•11mo ago

<@1075971582838714480> kapa.ai is still learning and improving, please let us know how it did by reacting below