Tags:  cssreactjs
Source:  Twitter logo

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

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;
2 users liked answer #0dislike answer #02
Praveen Rao Chavan.G profile pic
Praveen Rao Chavan.G

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

.button:focus{background: url('your new green image');
0 users liked answer #1dislike answer #10
ArpitaS profile pic
ArpitaS

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}/>
0 users liked answer #2dislike answer #20
rpandey profile pic
rpandey

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>

    );
  }
0 users liked answer #3dislike answer #30
Anupam singh pal profile pic
Anupam singh pal

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).