React list item with icon on Click event - reactjs

Question

On click of list item want to show checked icon in react. Below is list of items.
Now on click of any item need to show check icon to understand this menu is clicked/active like below.
That is need to list item should be present with icon in react js. Below is current code which uis used to list items.
<div key="favorites-dropdown" className={styles.pushBtnDropDown}>
<ul key="favorites-list">
{
favorites.map((favorite, idx) => {
return (<li key={`favorite-${idx}`}>
<a
key={`favorite-a-${idx}`}
tabIndex={idx}
role="button"
onClick={() => store.setFavoriteFilters(favorite.reportName, favorite.filters)}
>
{favorite.name}
</a>
</li>);
})
}
</ul>
</div>
Can someone please help to achieve this output.
Any reference or any another example with code will be helpful.
Thanks in advance.

Answer 1

You can create array favoritesFilters where you will save all checked filter names and render icons with condition favoritesFilters.includes(favorite.name). Example:
import { useState } from "react";
...
const [favoritesFilters, setFavoritesFilters] = useState([]);
const handleFavorites = (favorite) => {
store.setFavoriteFilters(favorite.reportName, favorite.filters);
setFavoritesFilters(prev => {
if(prev.includes(favorite.name)) {
let newPrev = [...prev];
return newPrev.filter(item => item !== favorite.name)
}
return [...prev, favorite.name]
})
}
...
<div key="favorites-dropdown" className={styles.pushBtnDropDown}>
<ul key="favorites-list">
{
favorites.map((favorite, idx) => {
return (<li key={`favorite-${idx}`}>
//your icon
{favoritesFilters.includes(favorite.name) && <img src="your_icon_path" />}
<a
key={`favorite-a-${idx}`}
tabIndex={idx}
role="button"
onClick={() => handleFavorites(favorite)}
>
{favorite.name}
</a>
</li>);
})
}
</ul>
</div>