Activate button toggle class on click

Question

I have this button

<ChartButton className={this.state.GPUClicked === 0 ? ' toggled' : ''}onClick={() => this.handleGPUChart(0, 'GPU 1')}>GPU 1</ChartButton>

which triggers this when clicked

    handleGPUChart = (num, title) => {
    this.setState({
        GPU1: num,
        GPUTitle: title,
        GPUClicked: num
    })
}

this is the CSS for this button

    export const ChartButton = styled.button`
  background-color: #5BB081;
  border: none;
  outline: none;
  color: white;
  padding: 5px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  white-space: nowrap;
  cursor: pointer;
  .toggled {
    background-color: #636863;
    font-size: 15px;
  }
`

What am I missing here? I want the button to switch to toggle when clicked which I think what I have as the className within the ChartButton component makes sense. I am ripping my hair out over this ... Thank you so much in advance.

How does your initial state look like ?

Sushanth --
– Sushanth --

2018-09-20 17:58:32 +00:00
Commented Sep 20, 2018 at 17:58 — Sushanth --
– Sushanth --, Commented Sep 20, 2018 at 17:58

Bricky · Accepted Answer · 2018-09-20 18:43:43Z

1

Pretty sure you just need to add an & before your extra class:

export const ChartButton = styled.button`
  background-color: #5BB081;
  border: none;
  outline: none;
  color: white;
  padding: 5px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  white-space: nowrap;
  cursor: pointer;
  &.toggled {
    background-color: #636863;
    font-size: 15px;
  }
`

edited Sep 20, 2018 at 18:43

answered Sep 20, 2018 at 17:59

Bricky

2,27417 silver badges34 bronze badges

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

1 Comment

Arthur Buczynski Over a year ago

Thank you so much !

Collectives™ on Stack Overflow

Activate button toggle class on click

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related