I have a list of data that displays in a Collapse, and I want it to highlight for every user click in the list, but only one at a time should be highlighted.
If you'd like to see a sample to better understand this concept, please check out:
const [highlight, setHighlight] = useState(false)
const handleClick = () => {
if (on) set(null)
else set(index)
}
<Collapse in={viewLocationList} sx={{ my: '2px' }}>
{!!searchParameter && (
<Box className="rounded-scrollbar widget-result-container"
onClick={handleClick}
sx={{
my: 1,
bgcolor: on && "lightgrey",
"&:hover": { bgcolor: on && "lightgrey" }
}}
>
{filteredLocations.map((location, key, on) => (
<LocationWidgetItem
key={key}
location={location}
onClickLocation={setActiveLocation}
index={key} on={highlight === key} set={setHighlight}
/>
))}
</Box>
)}
</Collapse>
Please note the error in the current code: