0
118
VisualizaçõesSet class styles to items in a react component
I tried to put a underline in my nav list with this code.
const [classOn, setClassOn] = useState('menu_selected');
const [linkMenu, setLinkMenu] = useState('');
function handleSelectedMenu(nb){
setLinkMenu(document.querySelectorAll('nav ul li'));
for(let i=1; i<linkMenu.length; i++){
linkMenu[i].firstChild.classList.remove(classOn)
}
linkMenu[nb].firstChild.classList.add(classOn)
}
on full screen, nothing happens and I get an error in my console log
Uncaught TypeError: Cannot read properties of undefined (reading 'firstChild')
but when I open mobile viewer, the styles are been applied.
·
Juan Pablo Isaza
3 Respostas
Responde à pergunta0
You can change the class name directly on the element based on an existing state, like:
function classNames(...classes) {
return classes.filter(Boolean).join(" ");
}
function FakeElement = () => {
const [hidden, setHidden] = useState(false);
return (
<li
className={classNames(
hidden
? "hidden-class"
: "",
"default-class other-default-class"
)}
>Stuff</li>
);
}
U can add a lot of conditions in classNames function.
·
Juan Pablo Isaza
Relatório
0
you should try something like this.
<ul onMouseOver={() => setLinkMenu(true)}
onMouseLeave={() => setLinkMenu(false)}
className={`${linkMenu ? 'block ' : 'hidden '}`} >
{options.map((option) => (
<li className="text-sm p-2 block w-full"
key={option}
onClick={() => setLinkMenu(false)}>{option}</li>
</ul>
·
Juan Pablo Isaza
Relatório
0
I solve the problem using styles.menu_selected.
·
Juan Pablo Isaza
Relatório
Responde à pergunta