How to create Dialog Box in ReactJS?
Last Updated :
05 Dec, 2023
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:
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/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...