On click button colour change in React

Question

I am currently having a little trouble with respect to getting a button colour to change on click:

My current code for button is as follows:

handleClick = () => {
   secondary=true
 }
<RaisedButton className={classPrefix + '-listToggle'}
  label="List View"
  onClick = {this.handleClick}
  icon={<Icon name="list" size={15} />}
/>

I also have a boolean called "secondary", which if 'true', changes the background color of the button. If I do the following code:

<RaisedButton className={classPrefix + '-listToggle'}
  label="List View"
  onClick = {this.handleClick}
  secondary=true
  icon={<Icon name="list" size={15} />}
/>

The button colour changes only on load, and remains the same if clicked.

What I ultimately want it to do is if button is clicked, set secondary to true, else, leave false.

Help?

kind user · Accepted Answer · 2017-06-29 15:29:39Z

3

I would suggest you to use state to determine if button is secondary or not. Anyways you didn't even init the secondary variable anywhere.

class App extends React.PureComponent {

  state = {
    active: false,
  };

  handleClick = () => {
    this.setState({ active: true });
  };

  render() {
    return (
      <RaisedButton className={classPrefix + '-listToggle'}
        label="List View"
        onClick={this.handleClick}
        icon={<Icon name="list" size={15} />}
      />

      <RaisedButton className={classPrefix + '-listToggle'}
        label="List View"
        secondary={this.state.active}
        icon={<Icon name="list" size={15} />}
      />
    )
  }
}

answered Jun 29, 2017 at 15:29

kind user

42k8 gold badges69 silver badges78 bronze badges

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

Collectives™ on Stack Overflow

On click button colour change in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related