将组内的数组项渲染为单独的 JSX 元素

Question

I have an array say arr chapters = ["C1", "C2", "C3,...."C10", "C11"] with 11 chapter titles. I am trying to render these inside <ul> as groups of max 5 items in each <ul> . So, for example:

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

I have passed on the array object to my component but I am having a hard time to figure out how to implement the conditional rendering part. This is inside (a bigger) render function:

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

I am thinking of using the index value to help me out identify the item number and conditionally render a closing </ul><ul> tag to close and open a new <ul> tag.

I am also thinking, maybe I should be putting the logic outside of the render() and pre-sort the items into arrays of 5 and then render them here.

Answer 1

Return tags based on index.

For first element in the group return <ul> and for last return </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>

Answer 2

try this:

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

Answer 3

Try this:

    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;
    };

And then you call getItems inside render :

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

Answer 4

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; 

The problem was to create dynamic iteration of <ul> </ul> .As the above person describing in the question.

So I have used lodash chunk function which will return two-dimensional array 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>