React 18 for Beginners Module - 14 Exercise- showing alert an alert

React
1

Hi Mosh,
Happy to join your course, i am new for react started from beginner course for react 18, while i am creating an alert or a button it is not showing any background color just simple text is there.
i used “alert alert-secondary alert-dismissible” property so not seeing close button as well,
I have removed code from app.css and index.css also.
code from Alert.tsx

interface AlertProps {
  children: ReactNode;
  onClose: () => void;
}
const Alert = ({ children, onClose }: AlertProps) => {
  return (
    <div className="alert alert-secondary alert-dismissible">
      {children}
      <button
        onClick={onclose}
        type="button"
        className="btn-close"
        data-bs-dismiss="alert"
        aria-label="Close"
      ></button>
    </div>
  );

code from App.tsx

import React, { useState } from "react";
import Alert from "./components/Alert";
import Button from "./components/Button";

function App() {
  const [alertVisible, setAlertVisibility] = useState(false);
  return (
    <div>
      {alertVisible && (
        <Alert onClose={setAlertVisibility(false)}>My ALERT</Alert>
      )}

      <Button onClick={() => setAlertVisibility(true)} color="danger">
        My Button
      </Button>
    </div>
  );
}

export default App;

how should i debug this issue any hint or possible reason could save me here.
others help will also be appreciated.

Thanks

2

Did you import bootstrap ok?

3

I have not started the react 18 courses yet but the classes that you reference are bootstrap related classes, I would make sure you have bootstrap referenced properly