How to Add Dismissible Alerts using React Bootstrap ?
A dismissible alert is a type of message that can be dismissed/canceled by the user by clicking the close icon(X) or close button. React Bootstrap provides us with an Alert react component for this. The react component has a dismissible prop which can be set to true to make the alert dismissible.
Creating React Application And Installing Module
Step 1: Create a React application using the following command:
npx create-react-app alert-gfg
Step 2: After creating your project folder i.e. alert-gfg, move to it using the command:
cd alert-gfg
Step 3: After creating the ReactJS application, Install the required modules using the following command:
npm install react-bootstrap bootstrap
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 { useState } from 'react' ; import Alert from 'react-bootstrap/Alert' ; import Button from 'react-bootstrap/Button' ; import 'bootstrap/dist/css/bootstrap.min.css' ; const alertTypes = [ "primary" , "info" , "secondary" , "success" , "danger" , "warning" , "light" , "dark" ]; function App() { const [showAlert, setShowAlert] = useState({ primary: false , secondary: false , info: false , success: false , danger: false , warning: false , light: false , dark: false }); const handleClickShowAll = () => { setShowAlert({ primary: true , secondary: true , info: true , success: true , danger: true , warning: true , light: true , dark: true }) } if (Object.values(showAlert) .some(val => val === true )) { return ( <> {alertTypes.map(type => ( <Alert className= 'm-3' variant={type} key={type} onClose={() => setShowAlert( { ...showAlert, [type]: false })} dismissible={ true }> <Alert.Heading> Alert!! </Alert.Heading> <p> This is a Beginner For Beginner {type} Alert!! </p> </Alert>))} </> ) } return ( <div style={{ textAlign: "center" }}> <Button onClick={handleClickShowAll} className= 'mt-3' >Show All Alerts</Button> </div>) } export default App; |
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:
Contact Us