Как создать динамичную смену картинок при нажатии в react.js?

@urban_will 

Для реализации динамической смены картинок в React.js, вам понадобится создать состояние, хранящее индекс текущей картинки, и метод, который будет изменять этот индекс при нажатии на кнопку. Вы можете сделать это следующим образом:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

import React, { useState } from 'react';

function ImageGallery() {
  const [currentImageIndex, setCurrentImageIndex] = useState(0);
  const images = ['/path/to/image1.jpg', '/path/to/image2.jpg', '/path/to/image3.jpg'];

  const handleNext = () => {
    setCurrentImageIndex((currentImageIndex + 1) % images.length);
  };

  return (
    <div>
      <img src={images[currentImageIndex]} alt="Current Image" />
      <button onClick={handleNext}>Next</button>
    </div>
  );
}

export default ImageGallery;

В приведенном выше примере, мы создаем состояние currentImageIndex с помощью хука useState, который по умолчанию устанавливается в 0. Затем мы определяем массив images, содержащий пути к картинкам.

Метод handleNext используется для изменения текущего индекса картинки. Мы увеличиваем текущий индекс на 1 и берем остаток от деления на длину массива картинок, чт

@urban_will 

обы получить циклическое переключение между ними. В JSX блоке мы отображаем текущую картинку, используя индекс из состояния currentImageIndex, и добавляем кнопку, при нажатии на которую будет вызываться метод handleNext.

Таким образом, каждый раз, когда вы будете нажимать на кнопку "Next", текущая картинка будет изменяться на следующую картинку в массиве. Если вы достигнете последней картинки, переключение будет происходить к первой картике в массиве.