Как изменить изображение на кнопке после нажатия reactJs

Question

У меня есть кнопка сохранения с изображением (значок с рамкой). Я хочу изменить цвет значка при нажатии кнопки

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

, и я хочу изменить 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>

прямо сейчас это выглядит как

Любая идея изменить цвет изображения save.png после нажатия кнопки (я имею в виду, когда свойство успешно сохранено).

Answer 1

Возможное решение - создать состояние и после сохранения свойства изменить это состояние, чтобы компоненты (цвета значков и изображение) повторно отрисовывались.

Пример для состояния:

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

Пример для изображения:

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>

Пример изменения состояния:

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