Create simple Popup in ReactJS

Today we’ll show you how to create simple popup in ReactJS without the help of the npm packages. You can use it to implement Confirmation box, email subscription notifications and display advertisements etc.

Create Simple Popup Example In React Application, Create modal popup in React JS. Simple react popup example, react popup window example, react confirmation popup, Implementing a Simple Modal Component in React, How do I create a popup window in react.js when the button and function are in separate file?

Basically, the idea is to provide the popup screen with the help of the pure HTML and CSS in ReactJS.

Way to create simple popup in ReactJS

  1. Set up React application
  2. Create popup component
  3. Handle the Popup
  4. Output

1. Set up React application

Let’s start with creating the simple react application with the help of the create-react-app. If you don’t know about how to create a react application then refer the below link.

Create React Application

2. Create popup component

In the second step, we’ll create a separate component for the popup and design it. You can modify it based on your theme.

Popup.js

style.css

3. Handle the Popup

Now, it’s time to manage the popup component using the state variable. So for that you have to use state variable and create toggle method to manage the show/hide of the popup component. Also we need to pass the toggle method inside the popup component so we can manage the click event of the close button.

App.js

4. Output

Run the project and check the output.

Output - Create simple Popup in ReactJS - Clue Mediator
Output – Create simple Popup in ReactJS – Clue Mediator

Thank you for reading!

Demo & Source Code

Github Repository StackBlitz Project
If you found value in this article,
you can support us by buying me a coffee! ☕

You may also like...

12 Responses

  1. Nahuel Leiva says:

    Hi, I’ve found this post and I’m wondering, suppose you have a form with a node inside. This node has a button that opens a popup window, and I need to pass the id of the node to the popup window. How should I do that? What’s the best way to do it?

    Regards,
    Nahuel

    • Clue Mediator says:

      Hi Nahuel,
      All I can understand is that you want to pass the id from the component to the popup. Therefore you can use the props to transfer data in the popup window.

  2. Nahuel Leiva says:

    Thanks for your answer, I figured out by myself at the end 🙂 was like you said, I used the props to transfer the data.

    Regards,
    Nahuel

  3. Anamika Tyagi says:

    Hi suppose you have a wall with multiple user post and you wish to show a popup when you click user profile icon or name. What CSS will be used at that point.

  4. Danilo Perucca says:

    Hi, thank you for this simple tutorial.
    How can I use a popup Component like yours that stop js execution until users interaction?

    In my case I need a popup with 2 buttons (that I have rendered correctly according to your tutorial) but the execution should be paused until
    user push one of two buttons and the execution shall continue according to user choice.

    I’m trying many way but without success, can you help me?

    • Clue Mediator says:

      Hi Danilo, What kind of JS execution would you like to prevent?
      Is it possible to share Stackblitz link?

  5. Leroy Steding says:

    Hi,

    Thanks for this tutorial.

    I need multiple popup generates based on an array of content. I am passing content through the component with props but the same content is showing up on all the popups. How can i handle multiple popups with different data per popup?

    • Clue Mediator says:

      Hi Leroy, Is it possible to share the StackBlitz sample code link with us? So we can help you.

      • Leroy Steding says:

        THis is the mapping function but for every article here the content needs to be different in the popup.

        {
        pastEvents.map((article, index) => {
        console.log(article)
        return (

        {isOpen && <Popup
        content={

        {article.event_date}
        {article.event_lineup[0].text}
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Test button
        }
        handleClose={togglePopup}
        />}

        )
        })
        }

        • Clue Mediator says:

          Hi Leroy, Your implementation is wrong. You have to take a separate flag for each article to manage (show/hide) popup. You can set the isOpen flag within the article object.

Leave a Reply

Your email address will not be published. Required fields are marked *