Как бы я переключался между изображениями при нажатии на изображения после последнего изображения в объекте?

Question

Я бы хотел переключаться между изображениями внутри imagesPath объекта. На данный момент вы можете успешно переключать plus и minus.

Другими словами, при нажатии на изображение plus, minus переключается и наоборот.

Внутри метода updateObject() я добавил пару ключ / значение, которая добавляет ключ divide со значением https://image.flaticon.com/icons/png/128/43/43097.png.

Как бы я смог получить изображение divide после нажатия (plus> minus> divide) и впоследствии получить доступ к другим ключам / значениям после нажатия divide?

У меня такое чувство, что я должен настроить this.setState(state => ({open: !state.open})); внутри toggleImage(), но не знаю, как.

import React, { Component } from 'react';
import './App.css';

const imagesPath = {
    minus: "https://images.vexels.com/media/users/3/131484/isolated/preview/a432fa4062ed3d68771db7c1d65ee885-minus-inside-circle-icon-by-vexels.png",
    plus: "https://cdn3.iconfinder.com/data/icons/glypho-generic-icons/64/plus-big-512.png"
};

console.log(imagesPath);

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            open: true
        };

        this.updateObject = this.updateObject.bind(this);
    }

    toggleImage = () => {
        this.setState(state => ({open: !state.open}));
    };

    updateObject = () => {
        for (let key in imagesPath) {
            key = "helloThere";
            imagesPath[key] = "some new url";
        }

        imagesPath["divide"] = "https://image.flaticon.com/icons/png/128/43/43097.png";
    };

    getImageName = () => this.state.open ? 'plus' :  'minus';

    render() {
        const imageName = this.getImageName();

        return (
            <div className="App">
                <img src={imagesPath[imageName]} onClick={this.toggleImage} style={{maxWidth: '50px'}}/>
                {this.updateObject()}
            </div>
        );
    }
}

export default App;

Answer 1

Я думаю, вы должны хранить путь к изображениям в state компонента и избегать изменения данных в рендере (я переместил его в componentDidMount в моих примерах).Если я правильно понял ваше описание, вы хотите добиться чего-то вроде карусели, поэтому я подготовил два примера.Один для массива, второй для объекта.

https://codesandbox.io/s/w0pvoqv7m5 - объект

https://codesandbox.io/s/ojprx25q9y - массив