How to create Dialog Box in ReactJS?
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> ); } |
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.
Reference: https://material-ui.com/components/dialogs/
Contact Us