toggle between two button style in react js

Question

I want the button's style to change when I click on them. I want the option 1 button to be selected and background color to change to by default. If I click on the option 2 button, I want the option 2 button to change and unchanged option 1. I already used the method found in this post However, the method doesn't seems to be working correctly since the color of my buttons is the default HTML button color.

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

}

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

Result of my code

Moinul Moin · Accepted Answer · 2022-08-30 09:11:38Z

1

I am not sure. did you say that when you click button 2, Its color will be changed and button 1 will be unchanged(active always)? or button 1 will be inactive?

https://codesandbox.io/s/priceless-tamas-yjr1lw?file=/src/Some.js

check it, do you want like this?

answered Aug 30, 2022 at 9:11

Moinul Moin

1502 silver badges7 bronze badges

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

2 Comments

You Know Who I Am Over a year ago

Sorry about vague wording, but this is exactly what I want! Thank you so much!

Moinul Moin Over a year ago

Thanks, also you have a little issue with CSS color, don't put hex code in strings. otherwise all good

Titulum · Accepted Answer · 2022-08-30 08:55:54Z

You can easily change colors on button clicks in react:

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

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

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

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

You can find a working example here.

derFrosty · Accepted Answer · 2022-08-30 09:23:03Z

0

There are a couple things that are not ok with your react code and CSS.

Number one you have elements with the property class instead of className.

Second, the color codes you are trying to attribute are strings ("#000"), so your browser doesn't know what to do with them. They should either be clear hexadecimals or using the rgb function.

I'll leave a Codesandbox using your component/CSS so you can take a look.

edited Aug 30, 2022 at 9:23

answered Aug 30, 2022 at 9:17

derFrosty

5484 silver badges18 bronze badges

1 Comment

You Know Who I Am Over a year ago

Thanks for the suggestion, and yes I just realized I put strings for my color code. I copy this from my attempt to make the buttons by importing styled but I forgot to delete them.

user17305980 · Accepted Answer · 2022-08-30 09:32:45Z

I think what you are doing is just wrong and very confusing as there is a very elegant way to do it.

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

export class OptionButtons extends Component {
  constructor() {
    super();
    this.state = {
      selected: "btn1" //make this state a boolean so that it will turn true when you press button 1 and false when you press button 2 or vice versa 
    };
  }

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

  //I have read it many times but I still don't understand what this function does in the code. In my opinion, it has no value to the action you are trying to achieve.  
  addClass = (btn) => {
    if (this.state.selected === btn) return "selected";
    else return "notSelect";
  };


  render() {
    return ( <
      div class = "option" >
      <
      h2 > Options < /h2> <
      div class = "buttons" >
      //it its better and easy to use a turnery operator rather than a 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>
    );
  }

Instead, you can do like this

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

export class OptionButtons extends Component {
  constructor() {
    super();
    this.state = {
      selected: null //null so that when you click, you can assign a boolean value
    };
  }

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

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

  render() {
    return ( <
      div class = "option" >
      <
      h2 > Options < /h2> <
      div class = "buttons" >
      //I'm using turnery expression which means if selected: true then classname will be btn1 
      <
      button id = "option1Btn"
      className = {
        this.state.selected && 'btn1'
      }
      onClick = {
        this.changeColorBtn2.bind(this, "btn1")
      } > Option 1 < /button>
      //same as I did in the previous button but it's vice-versa
      <
      button className = {!this.state.selected && 'btn2'
      }
      onClick = {
        this.changeColorBtn2.bind(this)
      } > Option 2 < /button> <
      /div> <
      /div>
    );
  }

I hope it answers your question

I read again and I saw you styled selected and unselected just assume the btn1 class as selected and btn2 as unselected

Collectives™ on Stack Overflow

toggle between two button style in react js

4 Answers 4

2 Comments

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related