How to change image on button after click reactJs

Question

I have a save button with an image (bordered icon) . I want to change icon color on button click is success

const saveClickProperty = () => {
    console.log("test");
    if(userId) {
        setLoading(true);
        propertyUserSave({
            userId: userId,
            propertyId: property._id
        }).then((resp) => {
            console.log("hello");
            openNotification("", "Property Saved");
            if (isSuccess(resp)) {
                console.log("inside");
                openNotification(userMessage.successHeader, userMessage.propertySaved);  
            }
        }).finally(() => setLoading(false));
    }
}

and i want to change save.png

<div className="saveAction">
                {userId && 
                    <a onClick={saveClickProperty} className="">
                        <div className="ActionDiv">
                            <img src="/images/index/save.png" alt="save" /> {' '} Save
                        </div>
                    </a>
                }

            </div>

right now this is look like

Any idea to change save.png image color after button click (i mean when property is successfully saved).

Can you include the CSS used, i.e. for classes saveAction and ActionDiv, anything that is styling the button. I don't think you can just "change" the color of a png file, but you may be able to do some filter/overlay. Can you also provide clearer expected result? Is it simply after the button is clicked change the color, or after some success state value is updated? — Drew Reese
– Drew Reese, Commented Jun 17, 2020 at 7:54
@DrewReese i want to do like similarly facebook like button is only bordered and after click it filled with color. I want to make my button same , when some one click to save , after success message color of heart on button must be change with some color. — Raushan Singh
– Raushan Singh, Commented Jun 17, 2020 at 7:57

Lucas L. · Accepted Answer · 2020-06-17 07:59:42Z

2

A possible solution is to create a state and after the property is saved, change that state, in order to the components (icon colors and image) re-render.

Example for State:

const [success, setSucess] = useState(false);

Example for Image:

const sucessImage = <img src="/images/index/NEWIMAGE.png" alt="save" />;
const defaultImage = <img src="/images/index/save.png" alt="save" />;

    <div className="saveAction">
                    {userId && 
                        <a onClick={saveClickProperty} className="">
                            <div className="ActionDiv">
                                ${success ? sucessImage : defaultImage} {' '} Save
                            </div>
                        </a>
                    }

                </div>

Example of changing the state:

...
        }).then((resp) => {
            setSucess(true);
            console.log("hello");
            openNotification("", "Property Saved");

answered Jun 17, 2020 at 7:59

Lucas L.

4373 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Raushan Singh Over a year ago

Exactly i was looking for this.

Collectives™ on Stack Overflow

How to change image on button after click reactJs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related