Как правильно отсечь выборку первых шести элементов из массива?

Question

[Денис]

Добрый вечер! Помогите разобраться с задачей:
у меня есть два дива. Если длина массива больше или равна 6 элементам, то в первом диве будет точно 6 элементов, а во втором, то что осталось. У меня не получается отсечь именно первые 6 элементов для первого дива. Например:

this.state = {
trackData:  [
0: '<span 1 />'
1: '<span 2 />'
2: '<span 3 />'
3: '<span 4 />'
4: '<span 5 />'
5: '<span 6 />'
6: '<span 7 />'
7: '<span 8 />'
]
}
       createTrack() {
        const { trackData } = this.state;
        const rows = [];

        for (let rowIdx = 0; rowIdx < trackData.length; rowIdx++) {
            if (rowIdx % 6 === 0) {
                rows.push(<div className='row__item' key={rowIdx}>{ this.createTrackCols(rowIdx) }</div>);
            }
        }

        return rows;
    }

createTrackCols(rowIdx) {
        const { trackData } = this.state;
        const cols = [];
       
        for (let colIdx = rowIdx; colIdx < trackData.length; colIdx++) {
            cols.push(
                <div className='col-2' key={colIdx}>
                    <Scrollbar
                        speed={1}
                        damping={0.1}
                        overscrollDamping={0.1}
                        thumbMinSize={20}
                        renderByPixels
                        continuousScrolling={'auto'}
                        overscrollEffect={'bounce'}
                        id='scroller-col'
                        ref={c => this.scrollbar = c}
                        syncCallbacks
                    >
                        content
                    </Scrollbar>
                </div>
            );
        }

        return cols;
    }

У меня в первом диве всегда все 8 элементов((

Answer 1

[Денис]

наверно я неправильно поставил суть вопроса, в общем я вывел сам формулу:
const sep = colIdx % 6;
(sep - colIdx + rowIdx) === 0

В итоге имеем:

const cols = [];

        // console.log(rowIdx);

        for (let colIdx = rowIdx; colIdx < trackData.length; colIdx++) {
            const sep = colIdx % 6;

            if ((sep - colIdx + rowIdx) === 0) {
                cols.push(
                    <div className={this.setColClassName(colIdx)} key={colIdx}>
                        <Scrollbar
                            speed={1}
                            damping={0.1}
                            overscrollDamping={0.1}
                            thumbMinSize={20}
                            renderByPixels
                            continuousScrolling={'auto'}
                            overscrollEffect={'bounce'}
                            id='scroller-col'
                            ref={c => this.scrollbar = c}
                            syncCallbacks
                        >
                            { this.renderColItems(colIdx) }
                        </Scrollbar>
                    </div>
                );
            }
        }

        return cols;

Все равно спасибо за отклик!

Answer 2

[Stalker_RED]

if (rowIdx % 6 === 0)это "каждый шестой" а не "первые шесть"
первые шесть будет вот так:
if (rowIdx < 6)

Но зачем все это, если есть slice

let firstSix = arr.slice(0, 6)