Use Bootstrap js to close alert with dismiss button

React
1

Hello everyone !

I purchased the “React 18 for Beginners” lesson and I have a question.
During the chapter “14 - Exercise - Showing an Alert”, we have to close a alert popup by using the dismiss button from Bootstrap (Alerts · Bootstrap v5.3)

In the final solution, we have to use a boolean useState() to hide / show the alert.

My question : why can’t we use the bootstrap JS to close the popup thanks by data-bs-dismiss="alert" (like in the bootstrap example) ?

The next code (based on documentation) is not working properly (alert popup should disappear when I click on the dismiss button but nothing happens) :

function Alert({ children }: Props) {
    return (
        <div
            className="alert alert-warning alert-dismissible fade show"
            role="alert"
        >
            {children}
            <button
                type="button"
                className="btn-close"
                data-bs-dismiss="alert"
                aria-label="Close"
            ></button>
        </div>
    );
}

By advance, thank for your help ! :slight_smile:

2

The bootstrap documentation says that you have to use the alert javascript plugin. That means you have to import the js codes for bootstrap:

import 'bootstrap/dist/js/bootstrap.js

I don’t think you want to do this because one, it is for vanilla javascript and two, it behaves differently from what we wrote so far with state controlled visibility. If you go this bootstrap js route, once you dismiss the alert, the alert goes away and stay closed. The button that controls the state controlled visibility will no longer behave the way you like. Now you have to rewrite your code to make it visible.

I say go experiment and see what I mean.