javascript - React - Styled Component change with Click

Question

How can I implement CSS change(colors... font-size... etc) with click without toggling?

menu_button.addEventListener('click', ()=>{
    bar.style.visibility = 'visible';
})

like this javascript, I just implement it just one side but I could not find how to do like this.

All reacts examples with css changes that I show implements with state...

visibility: ${props => props.isHidden ? 'visible' : 'hidden'};

<NavList isHidden={navClicked}></NavList>
<SubNavButton
  onClick={()=>{
    console.log(navClicked);
    setnavClicked(!navClicked);
  }}
> 
</SubNavButton>

just like this. I just want to do it without toggle.

question from:https://stackoverflow.com/questions/65932034/react-styled-component-change-with-click

Answer 1

It's actually very easy. Using your example:

<NavList isHidden={navClicked}></NavList>
  <SubNavButton onClick={()=>{
    console.log(navClicked);
    setnavClicked(false); //set it one way, so state won't change when you click again.
  }}> 
</SubNavButton>