Как организовать вывод элементов компонента react по 4 штуки?

Question

[Руслан]

Здравствуйте!
Нужно чтобы выводились в тегах с классом pac_list_channels_row по 4 дива с содержимым. Данные приходят с компонента выше уровнем в виде массива. Вот весь код:

const PacListchannels = ({chData}) => {
    const rows = chData.length / 4;
    console.log(rows);
    const lastOst = chData.length % 4;
    console.log(lastOst);

    const elements = chData.map((item, i) => {
        return (
            <div className="pac_list_channels_row">
                <div className="channels_one">
                    <div className="channels_one_img">
                        <img src={item.channelImg} alt=""/>
                    </div>
                    <div className="channels_one_name">
                        <p>{item.channelName}</p>
                    </div>
                </div>
            </div>
            
        )
    })

    return (
        <div className="pac_list_channels">
            {elements}            
        </div>
    );
  }

В данный момент, как видно в коде, в цикле каждый элемент выводится в div с классом pac_list_channels_row, а нужно по 4 их туда выводить. 4 вывелось и пошла новая строка. В нативном js знаю как сделать это условием, а в react так не получается.

Answer 1

[0xD34F]

const useChunked = (data, chunkSize) =>
  useMemo(
    () => Array.prototype.reduce.call(
      data,
      (acc, n, i) => ((acc[i / chunkSize | 0] ??= []).push(n), acc),
      []
    ),
    [ data, chunkSize ]
  );

const ChunkedListItem = ({ item }) =>
  <pre>{JSON.stringify(item, null, 2)}</pre>;

const ChunkedList = ({ items, inRow, Item = ChunkedListItem }) => {
  const rows = useChunked(items, inRow);

  return (
    <div className="chunked-list">
      {rows.map(row => (
        <ul>
          {row.map(n => <li><Item item={n} /></li>)}
        </ul>
      ))}
    </div>
  );
}

https://jsfiddle.net/7pq92ud8/1/