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

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;

You can try something like this in your .css file.

.button:focus{background: url('your new green image');

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}/>

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>

    );
  }