How To Display Alert Message In React.js

Alkesh Bijarniya
1y
5.6k
0
1

100

Article

Introduction

In this article, I will guide you through the process of adding an alert message in React.js

Prerequisites of React

Familiarity with HTML, and JavaScript.
node.js installed
Basic knowledge of React JS
Visual Studio Code

Create React Project

To create a React app, use the following command in the terminal.

npx create-react-app matui

Open the newly created project in Visual Studio Code, and install Material-UI; run the following command in your React project's root directory.

npm install @material-ui/core

Now right-click on the src folder and create a new component named 'Alertdemo.js'. We will create a simple modal popup using material UI. Import the following component from Material UI in the Alertdemo.js file.

import Alert from '@mui/material/Alert';
import Stack from '@mui/material/Stack';

Now, add the following code in the Alertdemo.js file.

import React from 'react'
import Alert from '@mui/material/Alert';
import Stack from '@mui/material/Stack';
function Alertdemo() {
  return (
    <Stack sx={{ width: '50%' }} spacing={2}>
      <Alert variant="outlined" severity="error">
        This is an error alert — check it out!
      </Alert>
      <Alert variant="outlined" severity="warning">
        This is a warning alert — check it out!
      </Alert>
      <Alert variant="outlined" severity="info">
        This is an info alert — check it out!
      </Alert>
      <Alert variant="outlined" severity="success">
        This is a success alert — check it out!
      </Alert>
      <Alert variant="filled" severity="error">
        This is an error alert — check it out!
      </Alert>
      <Alert variant="filled" severity="warning">
        This is a warning alert — check it out!
      </Alert>
      <Alert variant="filled" severity="info">
        This is an info alert — check it out!
      </Alert>
      <Alert variant="filled" severity="success">
        This is a success alert — check it out!
      </Alert>
    </Stack>
  )
}

export default Alertdemo

Now, import the Alertdemo component in the src/App.js file.

import './App.css';
import Alertdemo from './Alertdemo'
function App() {
  return (
    <div className="App">
      <Alertdemo/>
    </div>
  );
}

export default App;

Run the project using the 'npm start' command and check the result.