How to create Dialog Box in ReactJS?

Last Updated : 02 Aug, 2024

In modern web development, creating interactive and user-friendly interfaces is essential. One common element found in many applications is a dialog box. A dialog box is a component that appears on top of the main content to display information, receive user input, or prompt for confirmation. In this article, we will explore how to create a dialog box in ReactJS, a popular JavaScript library for building user interfaces.

Prerequisites

Steps to create React Application And Installing Module:

Step 1: Create a React application using the following command.

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command.

cd foldername

Step 3: After creating the ReactJS application, Install the material-ui modules using the following command.

npm install @material-ui/core

Project Structure:

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

JavaScript

import React from "react";
import Dialog from "@material-ui/core/Dialog";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import Button from "@material-ui/core/Button";

export default function App() {
    const [open, setOpen] = React.useState(false);

    const handleClickToOpen = () => {
        setOpen(true);
    };

    const handleToClose = () => {
        setOpen(false);
    };

    return (
        <div stlye={{}}>
            <h4>How to create Dialog Box in ReactJS?</h4>
            <Button variant="outlined" color="primary"
                onClick={handleClickToOpen}>
                Open Demo Dialog
            </Button>
            <Dialog open={open} onClose={handleToClose}>
                <DialogTitle>{"How are you?"}</DialogTitle>
                <DialogContent>
                    <DialogContentText>
                        I am Good, Hope the same for you!
                    </DialogContentText>
                </DialogContent>
                <DialogActions>
                    <Button onClick={handleToClose}
                        color="primary" autoFocus>
                        Close
                    </Button>
                </DialogActions>
            </Dialog>
        </div>
    );
}