How To Build A Dynamic Modal In Next js

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: Basic knowledge of React or Next.js A good understanding of JavaScript fundamentals Node.js installed on your machine 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" && You are welcome to the world of coding} 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(null); const modalContentRef = useRef(null); // Ref for modal content const modalSvc = useContext(ModalSvcContext); // Function to close the modal const closeModal = () => { modalSvc.closeModal(APP_MODALS.SUBMISSION_REJECTION_MODAL); }; const data = "Off-Topic or Misleading"; return ( {/* Modal content /} {/ Modal header /} {data === 'Copyright or Plagiarism' && ( Copyright or Plagiarism )} {data === 'Low Quality or Lacks Detail' && ( Low Quality or Lacks Detail )} {data === 'Spam or Promotional Content' && ( Spam or Promotional Content )} {data === 'Duplicate or Already Covered' && ( Duplicate or Already Covered )} {data === 'Off-Topic or Misleading' && ( Off-Topic or Misleading )} {/ the delete icon /} {/ Modal content text /} {data === 'Copyright or Plagiarism' && ( The content includes copyrighted material or is not original. Ensure you have the right to share all elements included.{' '} )} {data === 'Low Quality or Lacks Detail' && ( The submission is too vague, unclear, or missing key information. Consider adding more depth or improving readability.{' '} )} {data === 'Spam or Promotional Content' && ( Submissions should provide value beyond self-promotion. If relevant, try adding insights or making it more educational. )} {data === 'Duplicate or Already Covered' && ( Similar content already exists. Try adding a new angle, unique insights, or a fresh perspective.{' '} )} {data === 'Off-Topic or Misleading' && ( The content does not fit the platform's theme or contains unverified information. Please ensure it aligns with Web3 and is factually accurate{' '} )} {/ Button to close the modal */} Ok, got it! ); } 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

Apr 5, 2025 - 10:04

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:

Basic knowledge of React or Next.js
A good understanding of JavaScript fundamentals
Node.js installed on your machine
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" && You are welcome to the world of coding}

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(null);
    const modalContentRef = useRef(null); // Ref for modal content
    const modalSvc = useContext(ModalSvcContext);

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

const data = "Off-Topic or Misleading";
    return (
        
            {/* Modal content */}
            
                {/* Modal header */}
                
                    {data === 'Copyright or Plagiarism' && (
                        Copyright or Plagiarism
                    )}
                    {data === 'Low Quality or Lacks Detail' && (
                        
                            Low Quality or Lacks Detail
                        
                    )}
                    {data === 'Spam or Promotional Content' && (
                        
                            Spam or Promotional Content
                        
                    )}
                    {data === 'Duplicate or Already Covered' && (
                        
                            Duplicate or Already Covered
                        
                    )}
                    {data === 'Off-Topic or Misleading' && (
                        Off-Topic or Misleading
                    )}

                    {/* the delete icon */}
                    
                

                {/* Modal content text */}

                {data === 'Copyright or Plagiarism' && (
                    
                        The content includes copyrighted material or is not original. Ensure you
                        have the right to share all elements included.{' '}
                    
                )}
                {data === 'Low Quality or Lacks Detail' && (
                    

                        The submission is too vague, unclear, or missing key information. Consider
                        adding more depth or improving readability.{' '}
                    
                )}
                {data === 'Spam or Promotional Content' && (
                    

                        Submissions should provide value beyond self-promotion. If relevant, try
                        adding insights or making it more educational.
                    
                )}
                {data === 'Duplicate or Already Covered' && (
                    

                        Similar content already exists. Try adding a new angle, unique insights, or
                        a fresh perspective.{' '}
                    
                )}
                {data === 'Off-Topic or Misleading' && (
                    

                        The content does not fit the platform's theme or contains unverified
                        information. Please ensure it aligns with Web3 and is factually accurate{' '}
                    
                )}



                {/* Button to close the modal */}
                
            
        
    );
}

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