如何在ReactJS中使用地图渲染数组的引导网格

Question

After fetching data from the backend. I want to render data in bootstrap grid but in reactjs if you open an element for example () you cannot wait until 3 occurences to close the div. This is a code sample about my problem

export default class Posts extends Component {
    state = {
        posts: []
    }

    componentDidMount() {
        fetch(`https://jsonplaceholder.typicode.com/posts`)
            .then(response => response.json())
            .then(json => {
                this.setState({ posts: json })
            })
    }

    renderPosts() {
        const { posts } = this.state;

        if (posts.length > 0) {

            posts.map((post, index) => {

                // This is my issue here

                if (index === 0) {

                    return (<div className="row">

                        <div> className="col-sm">{post.title} </div>)

                } else if (index % 5 === 0) {


                    return (</div className="row">
                        <div className="row">
                        <div> className="col-sm">{post.title} </div>)

                } else {
                    return (<div> className="col-sm">{post.title} </div>)
                }

            })

        } else {
            return null;
        }
    }

    render() {
        return (
            <div>{this.renderPosts()}</div>
        )
    }
}

Answer 1

I solved this problem by grouping my data into an array of arrays. The array represents the rows. and inside of it arrays that represents the columns.

const RowPostGroups = [];
            for (let i = 0; i < photos.length; i = i + 5)
                RowPostGroups.push(photos.slice(i, i + 5));
// then map for rows
// then map for columns