toggle css class for two buttons when either is clicked - css

Question

import React, { Component } from 'react';
class Buttons extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="displayButtons">
<input className='button1' onClick={this.props.get_menu_items_api}
value="Categories" type="button" ref="button"></input>
<input className='button2' onClick={this.props.get_addons_items_api}
value="Add Ons" ref="button1" type="button"></input>
</div>
)
}
}
export default Buttons;
I have these two buttons in react class.Their css is given below. What I want to do is on whichever button I click on it should turn orange and other should turn white. Initially Categories button is orange and Addons button is white.
I tried calling a function onClick that changes its class but how will it change the class of other button also.
.button2 {
border: none;
padding: 11px 32px;
text-align: center;
text-decoration: none;
line-height: 14px;
font-family: Roboto-Regular;
font-size: 12px;
border-radius: 2px 0 0 2px;
display: inline-block;
float: left;
}
.button1 {
background-color:#F6A623;
color: white;
}
.button2 {
background-color:white;
color: black;
}

Answer 1

You can save the status of the component identifier of the orange button and change it with using onClick.
Component:
class App extends React.Component{
constructor(){
super();
this.state = {
orangeButtonId: null
}
this.setOrangeButton = this.setOrangeButton.bind(this);
}
setOrangeButton(id){
this.setState({orangeButtonId: id});
}
render(){
return(
<div>
<input className={this.state.orangeButtonId === 1? "button1 orange" : "button1"} onClick={() => this.setOrangeButton(1)} value="Categories" type="button" ref="button" />
<input className={this.state.orangeButtonId === 2? "button2 orange" : "button2"} onClick={() => this.setOrangeButton(2)}
value="Add Ons" ref="button1" type="button" />
</div>
)
}
}
And styles:
input[type="button"]{
background-color: white;
}
input[type="button"].orange{
background-color: orange;
}
Check the fiddle https://jsfiddle.net/69z2wepo/83389/.

Answer 2

it can easily achived by using the component inner state + classnames library:
class Buttons extends Component {
constructor(props) {
super(props);
this.onButtonClick = this.onButtonClick.bind(this);
this.state = {
selectedButton: 'categories'
}
}
onButtonClick(e) {
this.setState({
selectedButton: e.target.value
});
if (e.target.value === 'categories') {
this.props.get_menu_items_api();
} else {
this.props.get_addons_items_api();
}
}
render() {
return (
<div className="displayButtons">
<input className={classnames({'button': true, 'selected': this.state.selectedButton === 'categories'} onClick={onButtonClick}
value="Categories" type="button" ref="button"></input>
<input className={classnames({'button': true, 'selected': this.state.selectedButton === 'addons'})} onClick={onButtonClick}
value="Add Ons" ref="button1" type="button"></input>
</div>
)
}
}

Answer 3

You need to keep track of button state within your class. When onClick is called set your state.
onButton1Click() {
this.setState({button1Down: true});
}
Then in the render call you need to use this state to set the class names to apply to your buttons.
render() {
let button1ClassName = 'button1';
if (this.state.button1Down) {
button1ClassName += 'button-down';
}
return ...