title: How to change button icon when button is clicked in react.js
body: <p>I have a react function which returns a button.</p>
  
  <pre><code>&lt;div className="col-6 btn-group btn-group w-100"&gt;
         &lt;AuditMenuButtons buttonValue='Pending' buttonName='Inbox' changeFilterForButton={this.props.changeFilterForButton} icon={icon_inbox}/&gt;
         &lt;AuditMenuButtons buttonValue='Rejected' buttonName='Rejected' changeFilterForButton={this.props.changeFilterForButton} icon={icon_rejected}/&gt;
         &lt;AuditMenuButtons buttonValue='Accepted' buttonName='Accepted' changeFilterForButton={this.props.changeFilterForButton} icon={icon_accepted}/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Function is added below </p>
  
  <pre><code>    function AuditMenuButtons(props) {
      return(
          &lt;button className="w-25 btn menu-btn p-lg-3" name={props.buttonName} value={props.buttonValue} onClick={props.changeFilterForButton}&gt;&lt;img src={props.icon} className="pr-3 menu-btn-icons"&gt;
          &lt;/img&gt;{props.buttonName}&lt;/button&gt;
      );
  }
  </code></pre>
  
  <p>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 </p>