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

Question

[Ratibor Shugaev]

Доброго времени суток. Стало интересно, можно ли в 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>
</>
);

Есть ли какой-то простой способ или например, библиотека? Можно ли сделать так, что бы элементы не затирались при очередном рендере, то есть можно было постепенно отобразить весь массив. Спасибо!

Answer 1

[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/

Comments

[Ratibor Shugaev]

Я неправильно сформулировал, скорее вопрос в том, как рендерить массив поочередно, чтобы предыдущие элементы оставались отрендеренными, а не затирались при следущем рендере. Но это тоже интересно

[0xD34F]

Ratibor Shugaev,

<button
  onClick={() => setIndex(index + 1)}
  disabled={index === items.length}
>
  next
</button>
{items.slice(0, index).map(n => <div>{n}</div>)}

[Ratibor Shugaev]

0xD34F, спасибо за пример!

Answer 2

[Тигран Абрамян]

https://jsfiddle.net/xtewmfL5/

Comments

[Ratibor Shugaev]

Спасибо, хороший пример)