Skip to content
geeksforgeeks
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • Tutorials
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
  • Practice
    • Build your AI Agent
    • GfG 160
    • Problem of the Day
    • Practice Coding Problems
    • GfG SDE Sheet
  • Contests
    • Accenture Hackathon (Ending Soon!)
    • GfG Weekly [Rated Contest]
    • Job-A-Thon Hiring Challenge
    • All Contests and Events
  • NextJS
  • Material UI
  • React Bootstrap
  • React Suite
  • Ant Design
  • Reactstrap
  • BlueprintJS
  • React Desktop
  • React Native
  • React Rebass
  • React Spring
  • React Evergreen
  • ReactJS
  • ReactJS
  • JS Formatter
  • Web Technology
Open In App
Next Article:
How to create Date Picker in ReactJS?
Next article icon

How to create Dialog Box in ReactJS?

Last Updated : 02 Aug, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

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

  • Knowledge of React JS
  • Material UI basics
  • Node and Yarn/NPM installed

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.

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>     ); }

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.

a2

Reference: https://material-ui.com/components/dialogs/


Next Article
How to create Date Picker in ReactJS?
author
gouravhammad
Improve
Article Tags :
  • JavaScript
  • Web Technologies
  • ReactJS
  • Material-UI
  • React-Questions

Similar Reads

  • How to create dynamic search box in ReactJS?
    The dynamic search box is a search bar with a text field to take the user input and then perform some operation on the user input to show him the dynamic results based on his input. API calls are made whenever a user starts typing in order to show him the dynamic options. For example Youtube search
    2 min read
  • How to create a form in React?
    React uses forms to allow users to interact with the web page. In React, form data is usually handled by the components. When the data is handled by the components, all the data is stored in the component state. You can control changes by adding event handlers in the onChange attribute and that even
    5 min read
  • How to create a Speed Dial Component in ReactJS ?
    The Material-UI Lab hosts new and exciting components that aren’t fully ready for the core library. A Speed Dial component is like a dialog with multiple floating action buttons. It can be used to make any primary actions like share, copy, print, etc. more accessible and make the user experience bet
    3 min read
  • How to create Date Picker in ReactJS?
    Date pickers provide a simple way to select a single value from a pre-determined set. Material UI for React has this component available for us and it is very easy to integrate. We can create a Date Picker in ReactJS using the following approach: Creating React Application And Installing Module: Ste
    2 min read
  • How to Create a Upload File Button in ReactJS?
    File upload button is a commen feature in React Apps used to take the file input from user and process it. To perform this we can simple use input type file and trigger the input event with the help of upload button. ApproachTo create a upload file button in React we will be using the input type fil
    3 min read
  • How to create Accordion in ReactJS ?
    Accordions contain creation flows and allow lightweight editing of an element. Material UI for React has this component available for us, and it is very easy to integrate. We can create it in React using the following approach. Approach to create Accordion in React JSTo create accordion in react we
    2 min read
  • How to create Tabs in ReactJS ?
    Tabs make it easy to explore and switch between different views. Material UI for React has this component available for us and it is very easy to integrate. We can use Tabs Component in ReactJS using the following approach. Prerequisites:NPM & Node.jsReact JSMaterial UIwe have these approaches t
    4 min read
  • How to create Popup box in React JS ?
    Popup boxes, also known as modal or dialog boxes, are common UI elements used to display additional content or interactions on top of the main page. Creating a popup box in React can be achieved using various approaches, including libraries or custom implementations. We will use the Reactjs-popup li
    2 min read
  • How to create a dialog box or window in HTML ?
    In this article, we will create a dialog box or window using the <dialog> tag in the document. This tag is used to create popup dialog and models on a web page. This tag is new in HTML5. Syntax: <dialog open> Contents... </dialog> Example 1: <!DOCTYPE html> <html> <h
    1 min read
  • How are forms created in ReactJS ?
    Form is a document that stores information of a user on a web server using interactive controls. A form contains different kinds of information such as username, password, contact number, email ID, etc. Creating a form in React is almost similar to that of HTML if we keep it simple and just make a s
    3 min read
geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
Registered Address:
K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
GFG App on Play Store GFG App on App Store
Advertise with us
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • In Media
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Placement Training Program
  • Languages
  • Python
  • Java
  • C++
  • PHP
  • GoLang
  • SQL
  • R Language
  • Android Tutorial
  • Tutorials Archive
  • DSA
  • Data Structures
  • Algorithms
  • DSA for Beginners
  • Basic DSA Problems
  • DSA Roadmap
  • Top 100 DSA Interview Problems
  • DSA Roadmap by Sandeep Jain
  • All Cheat Sheets
  • Data Science & ML
  • Data Science With Python
  • Data Science For Beginner
  • Machine Learning
  • ML Maths
  • Data Visualisation
  • Pandas
  • NumPy
  • NLP
  • Deep Learning
  • Web Technologies
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • ReactJS
  • NextJS
  • Bootstrap
  • Web Design
  • Python Tutorial
  • Python Programming Examples
  • Python Projects
  • Python Tkinter
  • Python Web Scraping
  • OpenCV Tutorial
  • Python Interview Question
  • Django
  • Computer Science
  • Operating Systems
  • Computer Network
  • Database Management System
  • Software Engineering
  • Digital Logic Design
  • Engineering Maths
  • Software Development
  • Software Testing
  • DevOps
  • Git
  • Linux
  • AWS
  • Docker
  • Kubernetes
  • Azure
  • GCP
  • DevOps Roadmap
  • System Design
  • High Level Design
  • Low Level Design
  • UML Diagrams
  • Interview Guide
  • Design Patterns
  • OOAD
  • System Design Bootcamp
  • Interview Questions
  • Inteview Preparation
  • Competitive Programming
  • Top DS or Algo for CP
  • Company-Wise Recruitment Process
  • Company-Wise Preparation
  • Aptitude Preparation
  • Puzzles
  • School Subjects
  • Mathematics
  • Physics
  • Chemistry
  • Biology
  • Social Science
  • English Grammar
  • Commerce
  • World GK
  • GeeksforGeeks Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences