Set acitve classname to multiple items in react js (map)

I need to set the active classname to multiple onclick items inside a .map

I have implemented by it only keeps track of current click active index

I need the list of active items that were clicked.

const [activeIndex, setActiveIndex] = useState(-1);
return (
   <>
       {data?.map((item, index) => {
            return (
              <Col
                className={`mb-3 ${
                  index === activeIndex ? "selected" : "notselected"
                }`}
                key={item.id}
                onClick={() => {
                  handleclick(item.id, index, item.name);
                  setActiveIndex(index);
                }}
                xs={6}
                md={2}
              >
                <div
                  className={`common-cat-listener pop-cat-${item.id} all`}
                >
                  <h4 className="cat-text py-4 px-3">{item.name}</h4>
                </div>
              </Col>
            );
          })}
   </>

>Solution :

Since you need to keep track of multiple items, the state for that can’t be just a single number (unless you use prime number multiplication or something similarly absurd). Use an array of booleans instead.

const [activeIndicies, setActiveIndicies] = useState(() => data.map(() => false));
return (
   <>
       {data?.map((item, index) => {
            return (
              <Col
                className={`mb-3 ${
                  activeIndicies[index] ? "selected" : "notselected"
                }`}
                key={item.id}
                onClick={() => {
                  handleclick(item.id, index, item.name);
                  setActiveIndicies(activeIndicies.map((bool, j) => j === index ? true : bool);
                }}
              ...

Tiny demo:

const App = () => {
    const data = [1, 2, 3];
    const [activeIndicies, setActiveIndicies] = React.useState(() => data.map(() => false));
    return data.map((item, index) => {
        return (
            <span
                className={activeIndicies[index] ? "selected" : "notselected"}
                onClick={() => {
                    setActiveIndicies(activeIndicies.map((bool, j) => j === index ? true : bool));
                }}
            >{item}</span>
        )
    })
};

ReactDOM.render(<App />, document.querySelector('.react'));

.selected {
  color: yellow;
}

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>