Updating Icon on Button Click with React.js

Question

Updating Icon on Button Click with React.js

Looking for help with a React function that generates buttons.

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

Below is the accompanying function:

    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>
    );
}

The code above displays 3 buttons. The objective is to change the color of the button icon to green when clicked, and maintain this color until another button is clicked or the page is refreshed. The images used are .png files with green and silver borders. Attempts using CSS pseudo-class :active were unsuccessful. The goal is to persist the green color on the clicked button's icon.

css reactjs

Answer 1

Answer №1

Within this scenario, the icon element serves as a representation of a UI state, which needs to be managed within your application's state and then transmitted to the AuditMenuButtons component as props.

Utilize these props within the AuditMenuButtons component to perform the necessary validation checks.

        import React,{Component} from 'react';

        class customComponent 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 // Toggles each time it is clicked //
              }
             );
           }

           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 customComponent;

Answer 2

Within this scenario, the icon element serves as a representation of a UI state, which needs to be managed within your application's state and then transmitted to the AuditMenuButtons component as props.

Utilize these props within the AuditMenuButtons component to perform the necessary validation checks.

        import React,{Component} from 'react';

        class customComponent 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 // Toggles each time it is clicked //
              }
             );
           }

           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 customComponent;

Answer 3

Answer №2

If you want to change the style of a button when it is focused, consider adding the following code snippet to your .css file.

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

Answer 4

If you want to change the style of a button when it is focused, consider adding the following code snippet to your .css file.

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

Answer 5

Answer №3

To dynamically update the image path in React, you can store the path in the component's state and then call a method to change it on onClick event by using setState().

For more information, check out: https://reactjs.org/docs/handling-events.html

Learn about setState() here: https://reactjs.org/docs/react-component.html#setstate

this.state = {
  image_path: 'your image url here'
}

changePath = () => {
  this.setState({image_path:'new path'});
}
<AuditMenuButtons onClick={this.changePath} src={this.state.image_path}/>

Answer 6

To dynamically update the image path in React, you can store the path in the component's state and then call a method to change it on onClick event by using setState().

For more information, check out: https://reactjs.org/docs/handling-events.html

Learn about setState() here: https://reactjs.org/docs/react-component.html#setstate

this.state = {
  image_path: 'your image url here'
}

changePath = () => {
  this.setState({image_path:'new path'});
}
<AuditMenuButtons onClick={this.changePath} src={this.state.image_path}/>

Answer 7

Answer №4

Here is a suggestion you can try:

updateFilterForButton: function (props) {
     props.currentTarget.style.backgroundColor = '#ccc';
}

function CustomizeMenuButtons(props) {
    return(
        <button className="w-25 btn menu-btn p-lg-3" name={this.props.buttonName} 
value={this.props.buttonValue} onClick={this.props.updateFilterForButton}><img src={this.props.icon} className="pr-3 menu-btn-icons">
        </img>{this.props.buttonName}</button>
    );
}

If you prefer to use React methodology, you can utilize the constructor like this:

constructor(props) {
    super(props);
    this.state = {isColor: false};

    // This binding is necessary to make `this` work in the callback
    this.updateFilterForButton= this.updateFilterForButton.bind(this);
  }

  updateFilterForButton() {
    this.setState(state => ({
      isColor: !state.isColor
    }));
  }


  function CustomizeMenuButtons(props) {
    return (
<button className="w-25 btn menu-btn p-lg-3" name={props.buttonName} value={props.buttonValue} onClick={props.updateFilterForButton} style="background-color: {this.state.isColor? '#CCC' : ''} "><img src={props.icon} className="pr-3 menu-btn-icons">
    </img>{props.buttonName}</button>

    );
  }

Answer 8

Here is a suggestion you can try:

updateFilterForButton: function (props) {
     props.currentTarget.style.backgroundColor = '#ccc';
}

function CustomizeMenuButtons(props) {
    return(
        <button className="w-25 btn menu-btn p-lg-3" name={this.props.buttonName} 
value={this.props.buttonValue} onClick={this.props.updateFilterForButton}><img src={this.props.icon} className="pr-3 menu-btn-icons">
        </img>{this.props.buttonName}</button>
    );
}

If you prefer to use React methodology, you can utilize the constructor like this:

constructor(props) {
    super(props);
    this.state = {isColor: false};

    // This binding is necessary to make `this` work in the callback
    this.updateFilterForButton= this.updateFilterForButton.bind(this);
  }

  updateFilterForButton() {
    this.setState(state => ({
      isColor: !state.isColor
    }));
  }


  function CustomizeMenuButtons(props) {
    return (
<button className="w-25 btn menu-btn p-lg-3" name={props.buttonName} value={props.buttonValue} onClick={props.updateFilterForButton} style="background-color: {this.state.isColor? '#CCC' : ''} "><img src={props.icon} className="pr-3 menu-btn-icons">
    </img>{props.buttonName}</button>

    );
  }

Updating Icon on Button Click with React.js

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is it possible to modify the hue of the circular progress circle on this MUI component?

Is it possible to apply paper elevation through css properties?

Is it possible for a div nested within another div to still occupy space on the page despite being set

Using React Inline Styles to Set a Background Image

Using Google Fonts with AMP and Ruby on Rails: A Challenging Task

How can you tell if a contenteditable div is currently in focus?

Adding a class to an img tag with TinyMCE

Alignment of input fields and labels in Bootstrap by utilizing the Grid System

Unused React import in the index.js file

Is it possible to develop a chat application utilizing only react, node js, and mongoose? Would socket.io be necessary for this project?

Error: CSS and JavaScript files cannot be found

Make sure the div can grow in height as needed, but if it reaches the limit of its container, it

HTML5 text can display letters and numbers at varying heights

Utilizing parameters and variables as function arguments in reactjs

JavaScript and React.js encounter glitch in AWS Cognito authentication function

What is the best way to achieve text elements overlapping each other in CSS?

Error: Package.js detected multiple versions of fbjs installed

Can Antd's Typography.Paragraph be used as a multi-row Menu title?

The command to fix Eslint is not able to resolve all of the errors related to vue/html-indent

What is the most effective way to organize a large number of icons in React?