Switch between different button styles when a button is clicked in a React application

Question

Switch between different button styles when a button is clicked in a React application

I am looking to update the appearance of buttons when they are clicked.

Here is a preview of my files:

MainApp.js:

class ChangeButton extends Component {
  constructor(){
         super();
         this.state = {
              black: true
         }
    }
    changeColor(){
        this.setState({black: !this.state.black})
    }
    render(){
        let btn_class1 = this.state.black ? "blackButton" : "whiteButton";
        let btn_class2 = this.state.black ? "whiteButton" : "blackButton";
        let btn_class3 = this.state.black ? "whiteButton" : "blackButton";

        return (
             <div>
                 <button className={btn_class1}
                         onClick={this.changeColor.bind(this)}>
                           Button1
                  </button>
                  <button className={btn_class2}
                         onClick={this.changeColor.bind(this)}>
                           Button2
                  </button>
                  <button className={btn_class3}
                         onClick={this.changeColor.bind(this)}>
                           Button3
                  </button>
             </div>
        )
    }
}
export default MainApp;

design.css:

button{
  width: 80px;
  height: 40px;
  margin: 15px;
}
.blackButton{
  background-color: black;
  color: white;
}

.whiteButton{
  background-color: white;
  color: black;
}

Initially, I want button1 to have a black background while button2 and button3 should have a white background.

Upon clicking button2, it should switch to a black background, with button1 and button3 changing to a white background.

Similarly, when pressing button3, it should turn to a black background, shifting button1 and button2 to have a white background.

css reactjs

Answer 1

Answer №1

Approach 1
To manage the dark button state, a simple method is to create a state variable that stores the name of the currently dark button. Then, on button click events, pass the button name to a function that updates the state with the new dark button's name. This approach ensures only one button remains dark at a time.
Subsequently, compare each button's name with the darkButton state to determine whether it should have the dark or light class applied.

class Test extends Component {
  constructor() {
    super();
    this.state = {
      darkBtn: "btn1"
    };
  }

  changeColor = (btn) => {
    this.setState({ darkBtn: btn });
  };

  addDarkClass = (btn) => {
    if (this.state.darkBtn === btn) return "blackButton";
    else return "whiteButton";
  };

  render() {
    return (
      <div>
        <button
          className={this.addDarkClass("btn1")}
          onClick={this.changeColor.bind(this, "btn1")}
        >
          Button1
        </button>
        <button
          className={this.addDarkClass("btn2")}
          onClick={this.changeColor.bind(this, "btn2")}
        >
          Button2
        </button>
        <button
          className={this.addDarkClass("btn3")}
          onClick={this.changeColor.bind(this, "btn3")}
        >
          Button3
        </button>
      </div>
    );
  }
}

export default Test;

The above code snippet demonstrates how to toggle between dark and light classes for buttons based on the darkButton state in React.

Approach 2
If the buttons share similar properties, utilizing the map function can simplify the coding process.

class Test extends Component {
  constructor() {
    super();
    this.state = {
      darkBtn: 0
    };
  }

  changeColor = (btn) => {
    this.setState({ darkBtn: btn });
  };

  btns = ["Button1", "Button2", "Button3"];

  render() {
    return (
      <div>
        {this.btns.map((btn, i) => (
          <button
            key={i}
            onClick={this.changeColor.bind(this, i)}
            className={this.state.darkBtn === i ? "blackButton" : "whiteButton"}
          >
            {btn}
          </button>
        ))}
      </div>
    );
  }
}

export default Test;

Answer 2

Approach 1
To manage the dark button state, a simple method is to create a state variable that stores the name of the currently dark button. Then, on button click events, pass the button name to a function that updates the state with the new dark button's name. This approach ensures only one button remains dark at a time.
Subsequently, compare each button's name with the darkButton state to determine whether it should have the dark or light class applied.

class Test extends Component {
  constructor() {
    super();
    this.state = {
      darkBtn: "btn1"
    };
  }

  changeColor = (btn) => {
    this.setState({ darkBtn: btn });
  };

  addDarkClass = (btn) => {
    if (this.state.darkBtn === btn) return "blackButton";
    else return "whiteButton";
  };

  render() {
    return (
      <div>
        <button
          className={this.addDarkClass("btn1")}
          onClick={this.changeColor.bind(this, "btn1")}
        >
          Button1
        </button>
        <button
          className={this.addDarkClass("btn2")}
          onClick={this.changeColor.bind(this, "btn2")}
        >
          Button2
        </button>
        <button
          className={this.addDarkClass("btn3")}
          onClick={this.changeColor.bind(this, "btn3")}
        >
          Button3
        </button>
      </div>
    );
  }
}

export default Test;

The above code snippet demonstrates how to toggle between dark and light classes for buttons based on the darkButton state in React.

Approach 2
If the buttons share similar properties, utilizing the map function can simplify the coding process.

class Test extends Component {
  constructor() {
    super();
    this.state = {
      darkBtn: 0
    };
  }

  changeColor = (btn) => {
    this.setState({ darkBtn: btn });
  };

  btns = ["Button1", "Button2", "Button3"];

  render() {
    return (
      <div>
        {this.btns.map((btn, i) => (
          <button
            key={i}
            onClick={this.changeColor.bind(this, i)}
            className={this.state.darkBtn === i ? "blackButton" : "whiteButton"}
          >
            {btn}
          </button>
        ))}
      </div>
    );
  }
}

export default Test;

Answer 3

Answer №2

You have the option to simplify the process by utilizing state. Start by using state to store the index of the currently active button. Then, create an array of any desired size and iterate over it using the .map function to generate your buttons. The active button should be identified by matching its index with the active variable in the state.

class Test extends Component {
  constructor(){
         super();
         this.state = {
              active: 0
         }
    }
    changeColor = (i) => {
        this.setState({active: i})
    }
    render(){
        return (
             <div>
                 {Array.apply(null, Array(3)).map((el, i) => {
                 const active = this.state.active === i
                 <button key={i} className={active ? 'blackButton' : 'whiteButton'}
                         onClick={() => this.changeColor(i)}>
                           `Button${i + 1}`
                  </button>
             </div>
        )
    }
}
export default App;

Answer 4

You have the option to simplify the process by utilizing state. Start by using state to store the index of the currently active button. Then, create an array of any desired size and iterate over it using the .map function to generate your buttons. The active button should be identified by matching its index with the active variable in the state.

class Test extends Component {
  constructor(){
         super();
         this.state = {
              active: 0
         }
    }
    changeColor = (i) => {
        this.setState({active: i})
    }
    render(){
        return (
             <div>
                 {Array.apply(null, Array(3)).map((el, i) => {
                 const active = this.state.active === i
                 <button key={i} className={active ? 'blackButton' : 'whiteButton'}
                         onClick={() => this.changeColor(i)}>
                           `Button${i + 1}`
                  </button>
             </div>
        )
    }
}
export default App;

Answer 5

Answer №3

Functioning well

import React, { useState } from 'react';   
import './App.css';
const App = () => {
  const [counter, setCounter] = useState(0);

  const displayButtons = () => {
    return [0, 1, 2].map(item => {
      return <button 
      className={item === counter ? 'activeButton': 'inactiveButton'} 
      onClick={()=> setCounter(item)}
      key={item} > {`Button${item+1}`} </button>
    })
  }

  return (
    <div>
      {displayButtons()}
    </div>
  )
}

Answer 6

Functioning well

import React, { useState } from 'react';   
import './App.css';
const App = () => {
  const [counter, setCounter] = useState(0);

  const displayButtons = () => {
    return [0, 1, 2].map(item => {
      return <button 
      className={item === counter ? 'activeButton': 'inactiveButton'} 
      onClick={()=> setCounter(item)}
      key={item} > {`Button${item+1}`} </button>
    })
  }

  return (
    <div>
      {displayButtons()}
    </div>
  )
}

Switch between different button styles when a button is clicked in a React application

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way to modify the CSS for the product quantity display on my Shopify cart?

Space left vacant following an unordered list item

Tips for making sure there is a delay in between each axios call in a React

Managing schedules for tasks

Clicking on the div will set focus in the input field

Div flexes and compresses smaller than its content dimensions

Develop interactive applications with React Native by generating N animated values

Saving moveable objects on a Kanban board to firebase

Is there a method to trigger the DOM style change hook without using asynchronous code?

Refreshing backdrop for navigating through lists - Sprite edition

Is there a method to determine the page location of a DOM element when the body has a relative position?

"Enhancing the appearance of the input component in a TextField by utilizing the styled function

Checking if the text in view is completely visible using Selenium

A guide on using FileReader to efficiently read multiple images

Design featuring overlaying text on an image

Position the v-switch in the center of a v-flex container

Creating thumbnails for documents, like in Google Docs, using NextJS

Looking for advice on using media queries to resize my background image - any tips?

A step-by-step guide to extracting targeted information from an API and showcasing it within a React Native Flatlist

Position fixed causing website header to hide behind content