how to apply bootstrap active class to an onclick - html

Question

How do you apply a bootstrap class like nav-link active to a onlick(). I've been having hard time implementing this. I thought it would have just been as simple as.
<a
onClick={() => this.props.onUpdateSelectedProbe(probe)}
className="dropdown-item nav-link active"
>
But this however just makes all list items/anchor tags active.
return (
<div style={{ alignSelf: "center" }}>
<ul className="nav nav-pills">
<li className="nav-item dropdown ">
<div
className="dropdown-menu show"
x-placement="bottom-start"
style={{
position: "relative",
willChange: "transform",
top: "5px",
overflowY: "scroll",
maxHeight: "200px"
}}
>
{this.props.searchState.isActive === false
? probes.map(probe => (
<a
onClick={() => this.props.onUpdateSelectedProbe(probe)}
className="dropdown-item"
>
<div
className="dropdown-divider"
style={{ backgroundColor: "black" }}
></div>
{probe.companyPN}: {probe.description}
</a>
))
: filteredProbes.map(filterprobe => (
<a
onClick={() =>
this.props.onUpdateSelectedProbe(filterprobe)
}
className="dropdown-item"
>
<div className="dropdown-divider"></div>
{filterprobe.companyPN}: {filterprobe.description}
</a>
))}
</div>
</li>
</ul>
</div>
);

Answer 1

This is a basic example of adding items to a list and conditionally showing a "selected" class
.selected {
background: red;
}
function App() {
const [people] = useState([
{ id: 0, name: "Mario" },
{ id: 1, name: "Luigi" },
{ id: 2, name: "Peach" }
]);
const [selected, setSelected] = useState({});
return (
<div>
{people.map(({ id, name }) => (
<div
className={selected[id] ? "selected" : ""}
key={id}
onClick={() => setSelected({ ...selected, [id]: true })}
>
{name}
</div>
))}
</div>
);
}
https://codesandbox.io/s/funny-nobel-e6x6e