Open In App

How to create Dialog Box in ReactJS?

Last Updated : 05 Dec, 2023
Like Article

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.


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:

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.


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 = () => {
    const handleToClose = () => {
    return (
        <div stlye={{}}>
            <h4>How to create Dialog Box in ReactJS?</h4>
            <Button variant="outlined" color="primary"
                Open Demo Dialog
            <Dialog open={open} onClose={handleToClose}>
                <DialogTitle>{"How are you?"}</DialogTitle>
                        I am Good, Hope the same for you!
                    <Button onClick={handleToClose}
                        color="primary" autoFocus>

Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output.


Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads