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: