I’m using useImperativeHandle
and ref
to let the parent have access to some functions.
I’m wondering why the modal here is not closing? I tried to place alert and console.log and it works but the setIsEditOpen()
and setIsDeleteOpen()
is not working inside the closeModals
.
Product.tsx
export default function Products() {
const { products } = useLoaderData<typeof loader>();
const actionData = useActionData<typeof action>();
const productItemRef = useRef<ModalRef>(null);
useEffect(() => {
if (actionData?.ok) {
productItemRef?.current.closeModals();
}
}, [actionData]);
return (
<div className="divide-y">
{products.map((product) => (
<ProductItem
key={product.id}
product={product}
ref={productItemRef}
lastResult={actionData}
/>
))}
</div>
)
ProductItem.tsx
type ProductItemProps = {
product: {
id: string;
name: string;
description: string;
price: number;
category: string;
};
lastResult?: any;
};
export type ModalRef = {
closeModals: () => void;
};
export const ProductItem = forwardRef(
({ product, lastResult }: ProductItemProps, ref: Ref<ModalRef>) => {
const [isEditOpen, setIsEditOpen] = useState(false);
const [isDeleteOpen, setIsDeleteOpen] = useState(false);
const { name, description, price, category } = product;
useImperativeHandle(ref, () => ({
closeModals: () => {
setIsEditOpen(false);
setIsDeleteOpen(false);
},
}));
return (
<>
<ReusableSheet
isOpen={isEditOpen}
setIsOpen={setIsEditOpen}
title="Edit a product"
>
<EditProductForm
setIsOpen={setIsEditOpen}
product={product}
lastResult={lastResult}
/>
</ReusableSheet>
<ReusableDialog
isOpen={isDeleteOpen}
setIsOpen={setIsDeleteOpen}
title="Remove a product from the list"
description={
<span>
Are you sure you want to remove{" "}
<span className="font-bold">{name}</span>{" "}
from the list of products?
</span>
}
hideCloseButton
>
<DeleteProductForm setIsOpen={setIsDeleteOpen} product={product} />
</ReusableDialog>
</>
);
},
);