How to change button icon when button is clicked in react.js - css

Question

I have a react function which returns a button.
<div className="col-6 btn-group btn-group w-100">
<AuditMenuButtons buttonValue='Pending' buttonName='Inbox' changeFilterForButton={this.props.changeFilterForButton} icon={icon_inbox}/>
<AuditMenuButtons buttonValue='Rejected' buttonName='Rejected' changeFilterForButton={this.props.changeFilterForButton} icon={icon_rejected}/>
<AuditMenuButtons buttonValue='Accepted' buttonName='Accepted' changeFilterForButton={this.props.changeFilterForButton} icon={icon_accepted}/>
</div>
Function is added below
function AuditMenuButtons(props) {
return(
<button className="w-25 btn menu-btn p-lg-3" name={props.buttonName} value={props.buttonValue} onClick={props.changeFilterForButton}><img src={props.icon} className="pr-3 menu-btn-icons">
</img>{props.buttonName}</button>
);
}
You will see 3 buttons in above code. I want to change the button icon when one button is clicked. actually button icon color should be green when button is clicked. Images are .png file (with green and silver border). I tried button:active in css it didn't work for me. Image should remain until I clicked another button or page was refreshed

Answer 1

In this case, the icon part is a UI state, it has to maintained in your state and passed down to AuditMenuButtons has props.
use these props in AuditMenuButtons to do the desired check.
import React,{Component} from 'react';
class demoComponent extends from Component{
this.state={
isClicked:false,
buttonIcons:{
pending:{active_Icon:"../IconURL",Icon:"../IconURL"},
rejected:{active_Icon:"../IconURL",Icon:"../IconURL"},
accepted:{active_Icon:"../IconURL",Icon:"../IconURL"}
}
}
clickHandler = (event) =>{
this.setState(
{
isClicked:!this.state.isClicked // this is gonna toggle everytime you click //
}
);
}
render(){
return <div className="col-6 btn-group btn-group w-100">
<AuditMenuButtons clickhandler={this.clickHandler} buttonValue='Pending' buttonName='Inbox' isClicked={this.state.isClicked} buttonIcons={this.state.buttonIcons} changeFilterForButton={this.props.changeFilterForButton} icon={icon_inbox}/>
<AuditMenuButtons clickhandler={this.clickHandler} buttonValue='Rejected' buttonName='Rejected' isClicked={this.state.isClicked} buttonIcons={this.state.buttonIcons} changeFilterForButton={this.props.changeFilterForButton} icon={icon_rejected}/>
<AuditMenuButtons clickhandler={this.clickHandler} buttonValue='Accepted' buttonName='Accepted' isClicked={this.state.isClicked} buttonIcons={this.state.buttonIcons} changeFilterForButton={this.props.changeFilterForButton} icon={icon_accepted}/>
</div>
}
}
export default demoComponent;

Answer 2

You can try something like this in your .css file.
.button:focus{background: url('your new green image');

Answer 3

You can manage the image path in react state and call a method attach
it to onClick, where you use setState() and update the state.
Refer
https://reactjs.org/docs/handling-events.html
https://reactjs.org/docs/react-component.html#setstate
this.state = {
image_path: 'your image url here'
}
changeUrl = () => {
this.setState({image_path:'new path'});
}
<AuditMenuButtons onClick={this.changeUrl} src={this.state.image_path}/>

Answer 4

You can try with this:
changeFilterForButton: function (props) {
props.currentTarget.style.backgroundColor = '#ccc';
}
function AuditMenuButtons(props) {
return(
<button className="w-25 btn menu-btn p-lg-3" name={this.props.buttonName}
value={this.props.buttonValue} onClick={this.props.changeFilterForButton}><img src={this.props.icon} className="pr-3 menu-btn-icons">
</img>{this.props.buttonName}</button>
);
}
or if you want to use react methodology then you can use construtor like this
constructor(props) {
super(props);
this.state = {isColor: false};
// This binding is necessary to make `this` work in the callback
this.changeFilterForButton= this.changeFilterForButton.bind(this);
}
changeFilterForButton() {
this.setState(state => ({
isColor: !state.isColor
}));
}
function AuditMenuButtons(props) {
return (
<button className="w-25 btn menu-btn p-lg-3" name={props.buttonName} value={props.buttonValue} onClick={props.changeFilterForButton} style="background-color: {this.state.isColor? '#CCC' : ''} "><img src={props.icon} className="pr-3 menu-btn-icons">
</img>{props.buttonName}</button>
);
}