Switch between two button designs in a React JS application

Question

Switch between two button designs in a React JS application

Is it possible to have the style of a button change when clicked? Specifically, I would like the option 1 button to be selected and have its background color changed by default. If I click on the option 2 button, I want only that button to change while leaving option 1 unchanged.

After following the method outlined in this post, I encountered an issue where my buttons were not displaying the desired colors as expected.

Below is a snippet of my code:

import React, {Component} from 'react';
import './OptionButtons.css'

export class OptionButtons extends Component{
    constructor() {
        super();
        this.state = {
            selected: "btn1"
        };
}

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

addClass = (btn) => {
    if (this.state.selected === btn) return "selected";
    else return "notSelect";
};


render() {
    return (
        <div class = "option">
            <h2> Options </h2>
            <div class = "buttons">
                <button id = "option1Btn" className = {this.addClass("btn1")} onClick = {this.changeColor.bind(this, "btn1")}> Option 1 </button>
                <button className = {this.addClass("btn2")} onClick = {this.changeColor.bind(this, "btn2")}> Option 2 </button>
            </div>
        </div>
    );
}

}

Then in OptionButtons.css:

.option {
    box-sizing: border-box;
    position: relative;
    margin-top: 655px;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    max-width: 650px;
}

.option .buttons {
    flex: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.option .buttons button {
    flex-direction: row;

    border-radius: 5px;
    padding: 0 1.3rem;

    font-family: 'Nunito';
    font-style: normal;
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 27px;
    text-align: center;

    width: 320px;
    height: 40px;
    left: 50px;

    cursor: pointer;
}

#option1Btn{
    margin-right: 10px;
}

.selected {
    color: "#fff";
    background-color: "#00867D";
    border: 1px solid "#00867D";
}

.notSelected {
    color: "#00867D";
    background-color: "#F2F2F2";
    border: 1px solid "#F2F2F2";
}

To view the result of my code, click here.

css reactjs

Answer 1

Answer №1

Are you saying that when button 2 is clicked, its color will change while button 1 remains unchanged (always active)? Or will button 1 become inactive?

https://example.com/some-link

Take a look and let me know if this is what you're looking for.

Answer 2

Are you saying that when button 2 is clicked, its color will change while button 1 remains unchanged (always active)? Or will button 1 become inactive?

https://example.com/some-link

Take a look and let me know if this is what you're looking for.

Answer 3

Answer №2

Modifying colors based on button clicks in react is a breeze:

const [mainColor, setMainColor] = useState("white");
  const [buttonColors, setButtonColors] = useState({
    color1: "red",
    color2: "green"
  });

  const handleClickButton1 = () => {
    setMainColor("gray");
    setButtonColors({
      ...buttonColors,
      color1: "green"
    });
  };

  const handleClickButton2 = () => {
    setMainColor("green");
    setButtonColors({
      ...buttonColors,
      color2: "red"
    });
  };

  return (
    <div
      className="App"
      style={{
        backgroundColor: mainColor
      }}
    >
      <button
        style={{ backgroundColor: buttonColors.color1 }}
        onClick={handleClickButton1}
      >
        Button 1
      </button>
      <button
        style={{ backgroundColor: buttonColors.color2 }}
        onClick={handleClickButton2}
      >
        Button 2
      </button>
    </div>
  );

Check out this live demo for reference.

Answer 4

Modifying colors based on button clicks in react is a breeze:

const [mainColor, setMainColor] = useState("white");
  const [buttonColors, setButtonColors] = useState({
    color1: "red",
    color2: "green"
  });

  const handleClickButton1 = () => {
    setMainColor("gray");
    setButtonColors({
      ...buttonColors,
      color1: "green"
    });
  };

  const handleClickButton2 = () => {
    setMainColor("green");
    setButtonColors({
      ...buttonColors,
      color2: "red"
    });
  };

  return (
    <div
      className="App"
      style={{
        backgroundColor: mainColor
      }}
    >
      <button
        style={{ backgroundColor: buttonColors.color1 }}
        onClick={handleClickButton1}
      >
        Button 1
      </button>
      <button
        style={{ backgroundColor: buttonColors.color2 }}
        onClick={handleClickButton2}
      >
        Button 2
      </button>
    </div>
  );

Check out this live demo for reference.

Answer 5

Answer №3

Your React code and CSS could use some adjustments for better functionality.

First, make sure to use className instead of class for elements in your code.

Also, ensure that the color codes you are using are either clear hexadecimals or utilize the rgb function for proper representation in the browser.

Feel free to check out this Codesandbox link with your component/CSS for further reference.

Answer 6

Your React code and CSS could use some adjustments for better functionality.

First, make sure to use className instead of class for elements in your code.

Also, ensure that the color codes you are using are either clear hexadecimals or utilize the rgb function for proper representation in the browser.

Feel free to check out this Codesandbox link with your component/CSS for further reference.

Answer 7

Answer №4

It seems to me that your approach is somewhat misguided and could be simplified for better clarity.

import React, {
  Component
} from 'react';
import './OptionButtons.css'

export class OptionButtons extends Component {
  constructor() {
    super();
    this.state = {
      selected: "btn1" //transform this state into a boolean value that switches when different buttons are clicked 
    };
  }

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

  //After reviewing this function multiple times, I find it redundant and unnecessary for the intended purpose of the code.
  addClass = (btn) => {
    if (this.state.selected === btn) return "selected";
    else return "notSelect";
  };


  render() {
    return ( <
      div class = "option" >
      <
      h2 > Options < /h2> <
      div class = "buttons" >
      //Consider using a ternary operator instead of a separate function
      <
      button id = "option1Btn"
      className = {
        this.addClass("btn1")
      }
      onClick = {
        this.changeColor.bind(this, "btn1")
      } > Option 1 < /button> <
      button className = {
        this.addClass("btn2")
      }
      onClick = {
        this.changeColor.bind(this, "btn2")
      } > Option 2 < /button> <
      /div> <
      /div>
    );
  }

Alternatively, you could simplify the implementation like this:

import React, {
  Component
} from 'react';
import './OptionButtons.css'

export class OptionButtons extends Component {
  constructor() {
    super();
    this.state = {
      selected: null //initialize as null to assign a boolean value upon clicking
    };
  }

  changeColorBtn1 = () => {
    this.setState({
      selected: true
    })
  }

  changeColorBtn2 = () => {
    this.setState({
      selected: false
    })
  }

  render() {
    return ( <
      div class = "option" >
      <
      h2 > Options < /h2> <
      div class = "buttons" >
      //Utilizing a ternary expression for conditional rendering
      <
      button id = "option1Btn"
      className = {
        this.state.selected && 'btn1'
      }
      onClick = {
        this.changeColorBtn2.bind(this, "btn1")
      } > Option 1 < /button>
      //Similar approach with opposite conditions
      <
      button className = {!this.state.selected && 'btn2'
      }
      onClick = {
        this.changeColorBtn2.bind(this)
      } > Option 2 < /button> <
      /div> <
      /div>
    );
  }

Hopefully, this provides some clarity on the matter.

Answer 8

It seems to me that your approach is somewhat misguided and could be simplified for better clarity.

import React, {
  Component
} from 'react';
import './OptionButtons.css'

export class OptionButtons extends Component {
  constructor() {
    super();
    this.state = {
      selected: "btn1" //transform this state into a boolean value that switches when different buttons are clicked 
    };
  }

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

  //After reviewing this function multiple times, I find it redundant and unnecessary for the intended purpose of the code.
  addClass = (btn) => {
    if (this.state.selected === btn) return "selected";
    else return "notSelect";
  };


  render() {
    return ( <
      div class = "option" >
      <
      h2 > Options < /h2> <
      div class = "buttons" >
      //Consider using a ternary operator instead of a separate function
      <
      button id = "option1Btn"
      className = {
        this.addClass("btn1")
      }
      onClick = {
        this.changeColor.bind(this, "btn1")
      } > Option 1 < /button> <
      button className = {
        this.addClass("btn2")
      }
      onClick = {
        this.changeColor.bind(this, "btn2")
      } > Option 2 < /button> <
      /div> <
      /div>
    );
  }

Alternatively, you could simplify the implementation like this:

import React, {
  Component
} from 'react';
import './OptionButtons.css'

export class OptionButtons extends Component {
  constructor() {
    super();
    this.state = {
      selected: null //initialize as null to assign a boolean value upon clicking
    };
  }

  changeColorBtn1 = () => {
    this.setState({
      selected: true
    })
  }

  changeColorBtn2 = () => {
    this.setState({
      selected: false
    })
  }

  render() {
    return ( <
      div class = "option" >
      <
      h2 > Options < /h2> <
      div class = "buttons" >
      //Utilizing a ternary expression for conditional rendering
      <
      button id = "option1Btn"
      className = {
        this.state.selected && 'btn1'
      }
      onClick = {
        this.changeColorBtn2.bind(this, "btn1")
      } > Option 1 < /button>
      //Similar approach with opposite conditions
      <
      button className = {!this.state.selected && 'btn2'
      }
      onClick = {
        this.changeColorBtn2.bind(this)
      } > Option 2 < /button> <
      /div> <
      /div>
    );
  }

Hopefully, this provides some clarity on the matter.

Switch between two button designs in a React JS application

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Select any menu option to return to the one-page layout and then scroll down to find the location

Adjust ChartJS yAxes "tick marks"

Is it a mistake? Using React and ES6 without Babel may not be the

Expo SDK is essential for the proper functioning of Expo. It is required to run React Native built APK files

Utilizing React components from npm in Rails: A comprehensive guide

A guide on accessing JSON data with ReactJS

Switching the background image when hovering over a list element

Is it possible to display an item within another item?

Incorporating nested maps in JSX for efficient data manipulation

What is preventing you from utilizing TypeScript's abstract classes for generating React factories, especially when regular classes seem to function properly?

Conceal an element using a transition effect, initiating its positioning at the center instead of the default

The 'float' property in HTML and CSS

Toggling checkboxes based on user input

Is it necessary for React to have NodeJS in the frontend environment?

Customize the appearance of every other column in an asp gridview

Challenges encountered when assigning values in a form with Material UI, Formik, and Typescript

Cookies are not persisting in the browser even after successful login on a React Node.js application deployed on Render hosting platform

Using a CSS nth-child selector to eliminate the bottom margin of the final row

Struggling to get custom CSS to apply properly in Joomla 4 with Bootstrap 5 template

Iconic Material Design from Material-UI