Bootstrap not rendering active class

React
1

Hi
I have set a class in react className = {index === selectedIndex ? "list-group-item active : list-group-item } and it does not render active and no error.

I have checked the package.json file and bootstrap is listed
“dependencies”: {
“bootstrap”: “^5.2.3”,
“react”: “^18.2.0”,
“react-dom”: “^18.2.0”
},

here is a copy of my react component

import react from “react”;
import { MouseEvent } from “react”;

function ListGroup2() {
let items = [
“Dublin”,
“Cork”,
“Waterford”,
“Carlow”,
“Wexford”,
“Kildare”,
“Belfast”,
“Kerry”,
];
let selectedIndex = 0;

// items =

//event handler
const handleClick = (event: MouseEvent) => console.log(event);

const message = items.length === 0 &&

No Items Found

;

return (
<>

List Item Group 2


{message}
{items.map((item, index) => (
<li
className={
index === selectedIndex
? “list-group-item active”
: “list-group-item”
}
key={item}
//onClick={
onClick={handleClick}
>
{item}

))}
</>
);
}

I appreciate help/ advice to solve issue … Thanks, Dave