morozota
@morozota

Как отрендерить содержимое массива кусками заданного размера?

Приходит массив [1,2,3,4,5,6,7,...].
Надо, чтобы на выходе было так:

<div>
 <div>1</div>
 <div>2</div>
 <div>3</div>
</div>

<div>
 <div>4</div>
 <div>5</div>
 <div>6</div>
</div>

<div>
 <div>7</div>
</div>

То есть, сами элементы массива оборачивались в div и каждые 3 элемента тоже были завернуты. Пробую через reduce, но не могу довести до конца.
  • Вопрос задан
  • 539 просмотров
Решения вопроса 2
alexey-m-ukolov
@alexey-m-ukolov Куратор тега React
Пожалуйста, вот вам через reduce:
const chunks = [1,2,3,4,5,6,7].reduce((chunks, value, index) => {
  const chunkIndex = Math.floor(index / 3);

  if (!chunks[chunkIndex]) {
    chunks[chunkIndex] = [];
  }

  chunks[chunkIndex].push(value);

  return chunks;
}, []);

return chunks.map((chunk) => (
  <div key={chunk.join(`-`)}>
    {chunk.map((value) => (
      <div key={value}>
        {value}
      </div>
    ))}
  </div>
))
Ответ написан
Комментировать
0xD34F
@0xD34F Куратор тега React
class App extends React.Component {
  state = {
    items: [...Array(20).keys()],
    chunkLen: 3,
  }

  onClick = ({ target: { dataset: { change } } }) => {
    this.setState(({ chunkLen }) => ({
      chunkLen: Math.max(2, Math.min(9, chunkLen + +change)),
    }));
  }

  render() {
    const { items, chunkLen } = this.state;
    const chunks = Array.from(
      { length: Math.ceil(items.length / chunkLen) },
      (n, i) => items.slice(i * chunkLen, (i + 1) * chunkLen)
    );

    return (
      <div>
        <button data-change="-1" onClick={this.onClick}>-</button>
        {chunkLen}
        <button data-change="+1" onClick={this.onClick}>+</button>
        <div>
          {chunks.map(chunk => (
            <div className="group">
              {chunk.map(n => <div className="group-item">{n}</div>)}
            </div>
          ))}
        </div>
      </div>
    );
  }
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

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