@ratibordas
Frontend-статист

Как поочередно рендерить элементы массива по кнопке в React?

Доброго времени суток. Стало интересно, можно ли в React поочередно рендерить элементы массива, например по onClick кнопки и как это реализовать. Вот пример кода

const array = [
  {
    field: 'first field',
    id: 1
  },
  {
    field: 'second field',
    id: 2
  },
  {
    field: 'third field',
    id: 3
  },
  {
    field: 'fourth field',
    id: 4
  }
];

const SomeComponent = () => (
<>
 {array.map(el => (
    <span key={el.id}>{el.field}</span>
  ))}
<button onClick={handleField}>Next field</button>
</>
);


Есть ли какой-то простой способ или например, библиотека? Можно ли сделать так, что бы элементы не затирались при очередном рендере, то есть можно было постепенно отобразить весь массив. Спасибо!
  • Вопрос задан
  • 70 просмотров
Решения вопроса 2
0xD34F
@0xD34F
({ items }) => {
  const [ index, setIndex ] = useState(0);

  return (
    <div>
      <button onClick={() => setIndex((index + 1) % items.length)}>next</button>
      <span>{items[index]}</span>
    </div>
  );
}

https://jsfiddle.net/dpt9nkou/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы