Отображать элементы массива в группах как отдельные элементы JSX

Question

У меня есть массив, скажем, arr chapters = ["C1", "C2", "C3, ...." C10 "," C11 "] с 11 заголовками глав. Я пытаюсь отобразить их внутри <ul> в виде групп максимум по 5 элементов в каждом <ul>. Так, например:

<ul>
    <li>C1</li>
    <li>C2</li>
    <li>C3</li>
    <li>C4</li>
    <li>C5</li>
</ul>
<ul>
    <li>C6</li>
    <li>C7</li>
    <li>C8</li>
    <li>C9</li>
    <li>C10</li>
</ul>
<ul>
    <li>C11</li>
</ul>

Я передал объект массива моему компоненту, но мне сложно разобраться, как реализовать часть условного рендеринга. Это внутренняя (более крупная) функция рендеринга:

<ul>
{data.chapters && data.chapters.map((chapter,index) => (
    <li>{chapter}</li>
    //??How to conditionally add </ul><ul> here to start grouping them into 5 items
))}
</ul>

Я думаю об использовании значения индекса, чтобы помочь мне определить номер элемента и условно отобразить закрывающий тег </ul><ul>, чтобы закрыть и откройте новый тег <ul>.

Я также думаю, может быть, мне следует поместить logi c вне функции render () и предварительно отсортировать элементы в массивы по 5, а затем отобразить их здесь.

Answer 1

import React from 'react';
import './card.css';
import _ from 'lodash';
class Chapters extends React.Component {
    state = {
        chunk: _.chunk([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], 5)
    }

    render() {
        return (
            <div>
                {this.state.chunk.map((part, index) => {
                    return <ul>
                        Group - {index}
                        {part.map((ch, i) => {
                            return <li>{ch}</li>
                        })}
                    </ul>
                })}
            </div>
        )
    }
}

export default Chapters; 

Проблема состояла в том, чтобы создать динамическую c итерацию <ul> </ul>. Как описал вышеупомянутый человек в вопросе.

Поэтому я использовал loda sh chunk функция, которая будет возвращать двумерный массив const chunks = [[1,2,3,4,5], [6,7,8,9,10], [11]];

chunks [0] = <ul> </ul> chunks [0] = <ul> </ul> chunks [0] = <ul> </ul>

Answer 2

попробуйте это:

{data.chapters && data.chapters.map((chapter,index) => {
    return (index+1) % 5 === 0 && <ul><li>{chapter}</li></ul>
})}

Answer 3

Попробуйте:

    const courses = ["C1", "C2", "C3", "C4", "C5", "C6", "C7", "C8", "C9", "C10", "C11"];
    const getItems = function() {
        const lists = [];
        let listItems = [];
        for(let loopIndex = 0; loopIndex < courses.length; loopIndex++) {
            const nextIndex = (loopIndex + 1);
            listItems.push(<li>{ courses[loopIndex] }</li>);
            if(((nextIndex % 5) === 0) || nextIndex === courses.length) {
                lists.push(<ul>{ listItems }</ul>);
                listItems = [];
            }
        }
        return lists;
    };

И тогда вы позвоните getItems внутрь render:

render() {
    return (<>{ getItems() }</>);
}

Answer 4

Возвращает теги на основе индекса.

Для первого элемента в группе возвращается <ul> и для последнего возврата </ul>

<ul>
{data.chapters && data.chapters.map((chapter,index) => {
    if(index%5===1) return <ul><li>{chapter}</li>
    else if(index%5===0 || index+1===data.chapters.length) return <li>{chapter}</li></ul>
    else return <li>{chapter}</li>
})}
</ul>