Add class when button clicked in react.js

Question

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?

Alberto Schiabel · Accepted Answer · 2017-10-20 16:18:48Z

11

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} />
     );
}

edited Oct 20, 2017 at 16:18

Alberto Schiabel

1,15913 silver badges27 bronze badges

answered Mar 1, 2017 at 4:21

Mobius

2,8961 gold badge22 silver badges29 bronze badges

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

7 Comments

Ian Springer Over a year ago

Thank you, this is a very thorough explanation! I'm assuming you can pass as many key/value pairs into the className object as you want? And just so I'm understanding correctly, Button will have one class of 'button' when this.state.active is false, but two classes 'button' and 'active' when this.state.active is true?

ukrutt Over a year ago

What if the classes have hyphens? I'm not allowed to do {red-button: true}.

ukrutt Over a year ago

As a matter of fact, I have hard time getting this to work with any class name: const valueSpan = <span className={{small: true}}>label</span>; renders as <span class="[object Object]">label</span>

Alberto Schiabel Over a year ago

@steve, I have edited the answer. You should be able to see it online in a while, just after the peer review. Hope it helps, cheers!

Alberto Schiabel Over a year ago

@steve it's online

|

David Elkabas · Accepted Answer · 2021-11-26 10:09:10Z

3

if you are looking for 2021/2022 answer: Here is an example that uses react hooks, which add the class name app to a div element when we click on a Toggle class button.

 import React, { useState } from "react";import "./styles.css";

export default function App() {
  const [isActive, setActive] = useState("false");
  const handleToggle = () => {
    setActive(!isActive);  };
  return (
    <div className={isActive ? "app" : null}>
       <h1>Hello react</h1>
       <button onClick={handleToggle}>Toggle class</button>
    </div>
  );
}

answered Nov 26, 2021 at 10:09

David Elkabas

811 silver badge3 bronze badges

1 Comment

Raj Shah Over a year ago

Please don't add "thank you" as an answer. Once you have sufficient reputation, you will be able to vote up questions and answers that you found helpful. - From Review

Tudor Ilisoi · Accepted Answer · 2017-03-01 04:14:27Z

1

change className="button" to className={'button ' + f}

The expression enclosed in curly braces is evaluated as javascript and it produces a string

Also note that when using the curly brace syntax you do not have to add double quotes "" around attribute value .

When your JSX is parsed, React will generate the proper HTML attribute, for example class="button red".

answered Mar 1, 2017 at 4:14

Tudor Ilisoi

2,96426 silver badges26 bronze badges

Comments

Yooz · Accepted Answer · 2017-03-01 04:15:05Z

0

Have you tried, pass an optional parameter to renderButtons, check it and add to class :

...
 renderButtons(i, f, c){
    var cssClass =  c&&c!=""? "button " + c : "button";   
    return <Button value={i} className={cssClass}  id={f} active= {this.state.active} onClick={() => this.handleClick()}/>
  }
...

answered Mar 1, 2017 at 4:15

Yooz

2,51823 silver badges31 bronze badges

Collectives™ on Stack Overflow

Add class when button clicked in react.js

4 Answers 4

7 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related