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.

Ah, I may've misunderstood your question. Are you trying to toggle something in NavList based on something in SubNavButton being clicked? Or are you trying to toggle some style within the same styled-component without going through a state update? — Drew Reese
– Drew Reese, Commented Jan 28, 2021 at 6:45
I think @djolf has it then. Sorry for my confusion. There's no way around it, you'll need to toggle some state to pass the updated prop to the component you want to toggle style of. — Drew Reese
– Drew Reese, Commented Jan 28, 2021 at 6:50

djolf · Accepted Answer · 2021-01-28 06:41:27Z

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>

answered Jan 28, 2021 at 6:41

djolf

1,1966 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sonali · Accepted Answer · 2021-01-28 06:50:08Z

0

You will need to use a state variable for this, as the state of the component will change with the click of the button.

If you want to set the visibility of NavList in the onClick event handler of SubNavButton, then you will have to use a state variable for the style property of the NavList. so the initial value of state variable 'visibility' can be 'visible' and onClick it can be set to 'hidden'.

NavList can then be

<NavList style={{visibility: ${this.state.visibility} }}>

answered Jan 28, 2021 at 6:50

sonali

75810 silver badges23 bronze badges

Collectives™ on Stack Overflow

React - Styled Component change with Click

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related