CODEWITHSUNDEEP
javascriptreactjs
Arthur Buczynski
Arthur Buczynski

Reputation: 23

Activate button toggle class on click

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.

Upvotes: 1

Views: 58

Answers (1)

Bricky
Bricky

Reputation: 2745

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;
  }
`

Upvotes: 1

Related Questions