How to Build a Reusable Modal in Next.js

[@rishiraj2548]

🙂👍

[@OnlyJavascript]

Nice one. Can you please show how to use this modal for add/edit form.

[@CandDev]

you can pass the form as children to the dialog.

{isEdit ? "Edit Item" : "Add Item"}
{isEdit ? "Edit your item details." : "Add a new item."}

{
// Handle form submission
console.log(data);
setShowFormDialog(false);
}}
/>

[@rajashekhar433]

Why choose context?
And when the child components gets rerender?

[@CandDev]

I chose Context because it’s lightweight, built into React.
you can conditionally render the modal like this:
{showSignInModal && } to ensures the modal only renders when it’s needed.
Thanks for pointing it out.