How to apply a class on button click using react.js

Question

How to apply a class on button click using react.js

After spending a few weeks diving into React, I've got the hang of the basic syntax like props and states. However, I'm hitting a roadblock when it comes to connecting certain concepts, especially adding classes when a state changes. My current project involves creating a Simon Says game with four buttons built using a Button component. Initially, these buttons are set to have an opacity of .3 and an active state of false. When clicked, the "active" state should turn true, but I can't seem to add a CSS class to make the button fully opaque. Below 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>
    );
  }
}

Here's my CSS for reference:

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

I'm hoping to be able to add a class when a button is clicked while still retaining the "button" class on the component. Any suggestions or guidance would be greatly appreciated!

javascript css reactjs

Answer 1

Answer №1

When working with React, there are a few different methods you can use to style elements dynamically. One approach, as suggested by Tudor Ilisoi, involves simply concatenating strings. Another method is to assign an object to the className attribute instead of a string. While this approach may be considered easier, it does require the use of the classnames module. To incorporate this module into your project, you can either run npm install --save classnames or yarn add classnames. After installation, you can import it in your code like this:

import classNames from 'classnames';

You can then utilize it as follows:

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

The first set of curly brackets indicates to React that a dynamic property is being passed, while the second adheres to standard JavaScript syntax for objects. It's important to note that the object must be enclosed within the classNames() function. If the classNames() was declared previously, the implementation could look something like this:

render(){
    const classes = classNames({
        button: true, // always include this class
        active: this.state.active, // only apply this class if the state criteria are met
     });

     return (
          <button className={classes} />
     );
}

Answer 2

When working with React, there are a few different methods you can use to style elements dynamically. One approach, as suggested by Tudor Ilisoi, involves simply concatenating strings. Another method is to assign an object to the className attribute instead of a string. While this approach may be considered easier, it does require the use of the classnames module. To incorporate this module into your project, you can either run npm install --save classnames or yarn add classnames. After installation, you can import it in your code like this:

import classNames from 'classnames';

You can then utilize it as follows:

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

The first set of curly brackets indicates to React that a dynamic property is being passed, while the second adheres to standard JavaScript syntax for objects. It's important to note that the object must be enclosed within the classNames() function. If the classNames() was declared previously, the implementation could look something like this:

render(){
    const classes = classNames({
        button: true, // always include this class
        active: this.state.active, // only apply this class if the state criteria are met
     });

     return (
          <button className={classes} />
     );
}

Answer 3

Answer №2

Searching for the answer for 2021/2022? Check out this code snippet that demonstrates how to use react hooks to add the class name "app" to a div element when a Toggle class button is clicked.

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

Answer 4

Searching for the answer for 2021/2022? Check out this code snippet that demonstrates how to use react hooks to add the class name "app" to a div element when a Toggle class button is clicked.

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

Answer 5

Answer №3

To modify the button's class name, replace className="button" with className={'button ' + f}

The code inside curly braces will be executed as JavaScript and will result in a string

It is important to remember that using curly braces eliminates the need for double quotes around attribute values like ""

After parsing your JSX, React will generate the appropriate HTML attribute such as class="button red".

Answer 6

To modify the button's class name, replace className="button" with className={'button ' + f}

The code inside curly braces will be executed as JavaScript and will result in a string

It is important to remember that using curly braces eliminates the need for double quotes around attribute values like ""

After parsing your JSX, React will generate the appropriate HTML attribute such as class="button red".

Answer 7

Answer №4

Give this method a try: you can pass an optional parameter to the renderButtons function, then check it and add it to a 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()}/>
  }
...

Answer 8

Give this method a try: you can pass an optional parameter to the renderButtons function, then check it and add it to a 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()}/>
  }
...

How to apply a class on button click using react.js

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Mastering the Art of Aligning Avatars: Effortless Right Alignment

Using Vue3 to conditionally display a child div based on the class of its parent div

Saving JSON Data into my HTML document

"Troubleshooting the issue of nested jQuery Ajax requests failing to execute properly

Section with relative positioning has taken an unexpected position

Looking to add a dynamic drop-down menu to my search bar, similar to Google search

Can this be achieved solely with external URLs and not local ones?

Purpose of triggering another function during an ajax request

How to Create a Responsive Layout with Bootstrap 5: Cards, Grids, and Columns

Configuring Environment Variables in React App for Azure DevOps Release Pipeline

Incorrect Matching with Regular Expressions

What steps should I follow to enable my bot to generate or duplicate a new voice channel?

Chrome Devtool reported an error, but the majority of them are in a null file

Troubleshooting an issue with window.close in AngularJS

Create space in the bootstrap framework between an image and text

Error in React Router when using TypeScript

Expanding a CSS div when the content wraps on smaller screens

The Android WebView experiencing issues with the functionality of the Hamburger Menu

There is a vast expanse separating the header of the page and the navigation bar

Simplifying complex callback structures