I tried to change my classname from "css-1b4urjg" to "css-nt2d9h" on firing an event onSelect in anchor tag, I don't know why It doesn't work, I created some functions to handle this event but there is no means. My code Look likes this:
const units = document.getElementsByClassName("css-1b4urjg");`
const selectUnit1 = () => {
units[0].className = "css-nt2d9h";
};
const selectUnit2 = () => {
units[1].className = "css-nt2d9h";
};
const selectUnit3 = () => {
units[2].className = "css-nt2d9h";
};
const selectUnit4 = () => {
units[3].className = "css-nt2d9h";
};
const selectUnit5 = () => {
units[4].className = "css-nt2d9h";
};
const selectUnit6 = () => {
units[5].className = "css-nt2d9h";
};
<a href="#" data-id="1" className="css-1b4urjg" aria-label="Unit 1" onSelect={selectUnit1}></a>
<a href="#" data-id="1" className="css-1b4urjg" aria-label="Unit 2" onSelect={selectUnit2}></a>
<a href="#" data-id="1" className="css-1b4urjg" aria-label="Unit 3" onSelect={selectUnit3}></a>
<a href="#" data-id="1" className="css-1b4urjg" aria-label="Unit 4" onSelect={selectUnit4}></a>
<a href="#" data-id="1" className="css-1b4urjg" aria-label="Unit 5" onSelect={selectUnit5}></a>
<a href="#" data-id="1" className="css-1b4urjg" aria-label="Unit 6" onSelect={selectUnit6}></a>
