Question

15

Add class when button clicked in react.js

rated 0 times [ 19] [ 4] / answers: 1 / hits: 16419 / 7 Years ago, wed, march 1, 2017, 12:00:00

I've been working on React for a few weeks now, and while I've got most of the basic syntax down (props, states), I'm struggling to draw some connections with some concepts, most notably adding classes when a state has changed. I'm trying to build a simon says game, which contains four buttons, all built using a Button component. These are initially set to have a opacity of .3 and an active state of false. When clicked, the state active becomes true, but I cannot for the life of me figure out how to add a css class that can give the button a full opacity. Here is my code:

class App extends Component {

  constructor(){

    super();

    this.state = {

      active: false

    }

  }

  handleClick(){

    this.setState({active: !this.state.active})

  }

  renderButtons(i, f){

    return <Button value={i} className=button id={f} active= {this.state.active} onClick={() => this.handleClick()}/>

  }

  render() {

    return (

      <div className=App>

        {this.renderButtons(red, buttonRed)}

        {this.renderButtons(blue, buttonBlue)}

        {this.renderButtons(green, buttonGreen)}

        {this.renderButtons(yellow, buttonYellow)}

      </div>

    );

  }

}

And my css:

.button{

  width: 100px;

  height: 45px;

  opacity: .3;

  margin: 0 auto;

  margin-bottom: 30px;

}

#buttonRed{

  background: red;

}

#buttonBlue{

  background: blue;

}

#buttonGreen{

  background: green;

}

#buttonYellow{

  background: yellow;

}

So, at this moment, I would simply like to add a class when clicking the button while still keeping the button class to the component. Can anyone help?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mahogany

Add To Favorites

Follow

Total Points: 645

Total Questions: 107

Total Answers: 98

Location: Israel

Member since Wed, Apr 14, 2021

3 Years ago

answered 7 Years ago margaritakristinak · Accepted Answer

React has a couple of ways of doing this. The first is as suggested by Tudor Ilisoi, which is simply concatenating strings.
The second way is to give className an Object instead of a string. This way is arguably simpler but requires you to add the classnames module.
You can install it with either npm install --save classnames or yarn add classnames.
You can import it with:

import classNames from 'classnames';

And then you can use it in the following way:

<button className={classNames({button: true, active: this.state.active})} />

The first pair of curly brackets just tells react that we are passing a dynamic property, and the second is just the normal JavaScript syntax for objects.
Note that the object is wrapped by the classNames() function.
If we had declared it earlier, we could just as easily do:

render(){

    const classes = classNames({

        button: true, // we always want this class

        active: this.state.active, // only add this class if the state says so

     });



     return (

          <button className={classes} />

     );

}