How To Build A Dynamic Modal In Next.js

Question

As developers, we want to show users different UIs based on certain conditions. Maybe you want to show different kinds of messages for celebrations, paid users or different kinds of warnings. Creating separate modals for each case can be repetitive and stressful.

You can easily create a dynamic modal that shows different kinds of messages or UIs to users using logical AND condition. For this article, we will be using Next.js for our code examples.

Prerequisites
To follow along, you should have:

1. Basic knowledge of React or Next.js
2. A good understanding of JavaScript fundamentals
3. Node.js installed on your machine
4. A modern web browser (like Google Chrome)

What is Logical AND (&&) condition

It is a condition that allows us to evaluate expressions in Javascript and return a value if our expression is truthy.

    const data = "success"
{data === "success" && <p>You are welcome to the world of coding</p>}

In our example above, we can only render You are welcome to the world of coding if only the data is equal to success. We can choose any words or value we want to use, you will be able to render the text as long as it's true. You can clearly see what we can do with this condition right? that's good, let's keep going.

export default function SubmissionRejectionModalPage() {
    const modalRef = useRef<HTMLDivElement>(null);
    const modalContentRef = useRef<HTMLDivElement>(null); // Ref for modal content
    const modalSvc = useContext<ModalService>(ModalSvcContext);

    // Function to close the modal
    const closeModal = () => {
        modalSvc.closeModal(APP_MODALS.SUBMISSION_REJECTION_MODAL);
    };

const data = "Off-Topic or Misleading";
    return (
        <main
            className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-[10]"
            tabIndex={-1}
            ref={modalRef}
        >
            {/* Modal content */}
            <div
                ref={modalContentRef}
                className="w-[343px] p-6 rounded-lg bg-white dark:bg-dark-50 min-h-[200px] md:w-[512px]"
            >
                {/* Modal header */}
                <div className="flex items-center justify-between">
                    {data === 'Copyright or Plagiarism' && (
                        <h4 className="text-2xl font-bold leading-9">Copyright or Plagiarism</h4>
                    )}
                    {data === 'Low Quality or Lacks Detail' && (
                        <h4 className="text-2xl font-bold leading-9">
                            Low Quality or Lacks Detail
                        </h4>
                    )}
                    {data === 'Spam or Promotional Content' && (
                        <h4 className="text-2xl font-bold leading-9">
                            Spam or Promotional Content
                        </h4>
                    )}
                    {data === 'Duplicate or Already Covered' && (
                        <h4 className="text-2xl font-bold leading-9">
                            Duplicate or Already Covered
                        </h4>
                    )}
                    {data === 'Off-Topic or Misleading' && (
                        <h4 className="text-2xl font-bold leading-9">Off-Topic or Misleading</h4>
                    )}

                    {/* the delete icon */}
                    <i className="fa-solid fa-xmark cursor-pointer" onClick={closeModal}></i>
                </div>

                {/* Modal content text */}

                {data === 'Copyright or Plagiarism' && (
                    <p className="mt-6 text-base leading-6">
                        The content includes copyrighted material or is not original. Ensure you
                        have the right to share all elements included.{' '}
                    </p>
                )}
                {data === 'Low Quality or Lacks Detail' && (
                    <p className="mt-6 text-base leading-6">
                        The submission is too vague, unclear, or missing key information. Consider
                        adding more depth or improving readability.{' '}
                    </p>
                )}
                {data === 'Spam or Promotional Content' && (
                    <p className="mt-6 text-base leading-6">
                        Submissions should provide value beyond self-promotion. If relevant, try
                        adding insights or making it more educational.
                    </p>
                )}
                {data === 'Duplicate or Already Covered' && (
                    <p className="mt-6 text-base leading-6">
                        Similar content already exists. Try adding a new angle, unique insights, or
                        a fresh perspective.{' '}
                    </p>
                )}
                {data === 'Off-Topic or Misleading' && (
                    <p className="mt-6 text-base leading-6">
                        The content does not fit the platform's theme or contains unverified
                        information. Please ensure it aligns with Web3 and is factually accurate{' '}
                    </p>
                )}



                {/* Button to close the modal */}
                <Button className="blue w-full mt-6 text-sm" onClick={closeModal}>
                    Ok, got it!
                </Button>
            </div>
        </main>
    );
}

As you can clearly see that we can render different UIs with the help of Logical AND (&&) condition. We don`t have to create different modals, this allows us to write clean and effective code.

Conclusion

Logical AND (&&) condition allows us to render a value if the expression is true. With this, we can easily create a dynamic modal that will show different UIs based on the logic. We don`t have to create separate modals for each case, which could be repetitive and stressful.

You now understand what Logical AND (&&) condition is and how to use it. You can go ahead and flex your newly acquired skills.

Happy coding!

Comments

Really enjoyed this! I love how you broke down using the logical AND condition for dynamic modals—such a clean and efficient approach. Have you ever faced any challenges when scaling this kind of pattern for bigger projects with more complex conditions? Would love to hear your thoughts!