TanStackIntermediate

Edit Form — Pre-filled

একই ProductForm edit-মোডে — defaultValues, reset-এ data sync — বাংলায়।

7টি অংশবাংলা ভাষায়

দুর্দান্ত সুবিধা — একই ProductForm-কে edit-মোডেও ব্যবহার করা যায়! শুধু defaultValues product-এর ডেটা দিয়ে pass করি; button-এর লেখা auto-bদলে 'আপডেট'।

Edit dialog-এtsx

tsx

const updateProduct = useUpdateProduct();

function openEdit(product: Product) {
  setEditingProduct(product);
  setEditOpen(true);
}

<Dialog open={editOpen} onOpenChange={setEditOpen}>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Product সম্পাদনা</DialogTitle>
    </DialogHeader>
    {editingProduct && (
      <ProductForm
        // edit-মোড: product-এর মান বসে
        key={editingProduct.id}   // important
        defaultValues={{
          name: editingProduct.name,
          description: editingProduct.description ?? "",
          price: editingProduct.price,
          category: editingProduct.category,
          stock: editingProduct.stock,
          status: editingProduct.status,
        }}
        isSubmitting={updateProduct.isPending}
        onSubmit={(values) => {
          updateProduct.mutate(
            { id: editingProduct.id, input: values },
            { onSuccess: () => setEditOpen(false) },
          );
        }}
      />
    )}
  </DialogContent>
</Dialog>

key={editingProduct.id} কেন

ভিন্ন product-এ ক্লিক করলে defaultValues বদলায় বটে — কিন্তু React একই component instance রাখে, আর RHF uncontrolled। তাই পুরনো value থেকে থেকে যাবে। key ভিন্ন করলে React পুরো component re-mount করে — এতে defaultValues ঠিকভাবে বসে।

reset fallback

যদি key না চানtsx

tsx

// dialog খোলার সাথে সাথেই
useEffect(() => {
  if (editingProduct) {
    form.reset({
      name: editingProduct.name,
      price: editingProduct.price,
      category: editingProduct.category,
      stock: editingProduct.stock,
      status: editingProduct.status,
      description: editingProduct.description ?? "",
    });
  }
}, [editingProduct]);

key vs reset

উভয়ই valid — key simple/নির্ভরযোগ্য, reset দরকার যেখানে dialog খোলা-রাখা অবস্থায় অন্যান্য state (যেমন id) ফিল্টার করা। এই project-এ key ব্যবহার করব।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।