Как сделать чтобы вместо цифр отображалось соответствующее цифре изображение при нажатии на кнопки?

Question

[ironmansl]

На данный момент у меня есть две кнопки, кнопка prev уменьшает число на 1, а кнопка next увеличивает на 1.
Мне нужно как-то сделать чтобы вместо числа справа от кнопок, или где-нибудь на странице отображались изображения которые у меня находятся в массиве:
изображение банан = числу 1
арбуз = числу 2
клубника = числу 3

Тоесть как должно быть:

На страничке есть кнопки и справа картинка банан так в state я задал значение 1 а цифре один соотвествует число 1, когда я нажал кнопку next отобразился арбуз(цифра 2), нажал еще next отобразилась клубника и так по кругу. Если число будет больше 3 отображается картинка под числом 1, а если будет меньше 1 то под числом 3.
Что нужно добавить/изменить в моем коде чтобы такое реализовать?
P.S. Может лучше было добавить изображения в state а не в переменную items?

Вот мой исходный код:

const items = [
    { img: "https://pbs.twimg.com/profile_images/3117087049/697e0334a13361c6ab68ce00aefefa4f.jpeg" },
    { img: "http://vkclub.su/_data/gifts/134.jpg" },
    { img: "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTBIqdLHvhxu4LAxudRrH2OoJSctYh9pw3NyziKUwbpp77tsOvu" }
];

class App extends React.Component {
  state = {
    image: 1,
  }

  plus = () => {
    this.setState({
      image: this.state.image + 1,
    });
  }
  
  minus = () => {
      this.setState({
      image: this.state.image - 1,
    });
  }
  
  render() {
    return (
      <div><button onClick={this.minus}>Prev</button>
        <button onClick={this.plus}>Next</button>
        {this.state.image}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

и в песочнице:

https://jsfiddle.net/51jevc4y/

Answer 1

[0xD34F]

{this.state.image}

меняйте на

<img src={this.props.items[this.state.image].img} />

, а

<App />

на

<App items={items} />

UPD. https://jsfiddle.net/69f71jbk/

Answer 2

[Максим]

Что-то такое можно :)

const items = [
    { img: "https://pbs.twimg.com/profile_images/3117087049/697e0334a13361c6ab68ce00aefefa4f.jpeg" },
    { img: "http://vkclub.su/_data/gifts/134.jpg" },
    { img: "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTBIqdLHvhxu4LAxudRrH2OoJSctYh9pw3NyziKUwbpp77tsOvu" }
];



class App extends React.Component {
  state = {
    image: 1,
  }

  plus = () => {
  	const img = this.state.image;
    this.setState({
      image: (img + 1) % 3,
    });
  }
  
  minus = () => {
    const img = this.state.image;
    this.setState({
      image: (Math.abs(img - 1)) % 3,
    });
  }
  
  render() {
  const {image} = this.state;
    return (
      <div>
        <button onClick={this.minus}>Prev</button>
        <button onClick={this.plus}>Next</button>
        {this.state.image}
        <img src={items[image].img} />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

Comments

[ironmansl]

а что значит эта строка? тоесть как как расшифровывается она?
image: (img + 1) % 3,

[Максим]

ironmansl, это чтобы не выходить за пределы данного массива с данными и крутиться от 0 до 3 (0, 1, 2). То есть прибавляем единицу и берем остаток от деления на количество элементов массива. Не лучший вариант, конечно, у 0xD34F красивее получилось) но все же

[ironmansl]

Максим Черябушкин,
я просто не очень понимаю какой остаток от деления когда число в скобках меньше за то что после оператора %
image : (1 + 1) %3 // какой тут остаток от деления? и почему?
image : (2 + 1) %3 // тут понятно, остаток от деления = 0
image : (3 + 1) %3 // тут понятно, остаток от деления = 1

[Максим]

ironmansl, все просто, на самом деле)
Если делить с остатком меньшее число на большее, то частное всегда равно 0, а в остатке столько сколько делили.
Например 8:10=0 (ост. 8)
5:12=0(ост. 5)
То есть в нашем случае, при делении 2 на три мы получаем 0 и остаток 2

[ironmansl]

Максим Черябушкин, спасибо большое)