बैकएंड से डेटा लाने के बाद। मैं बूटस्ट्रैप ग्रिड में डेटा प्रस्तुत करना चाहता हूं, लेकिन प्रतिक्रिया में यदि आप उदाहरण के लिए एक तत्व खोलते हैं () तो आप डिव को बंद करने के लिए 3 अवसरों तक इंतजार नहीं कर सकते। यह मेरी समस्या के बारे में एक कोड नमूना है

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>
        )
    }
}
0
Ayoub Bani 1 सितंबर 2019, 10:05

1 उत्तर

सबसे बढ़िया उत्तर

मैंने अपने डेटा को सरणियों की एक सरणी में समूहित करके इस समस्या को हल किया। सरणी पंक्तियों का प्रतिनिधित्व करती है। और इसके अंदर सरणियाँ हैं जो स्तंभों का प्रतिनिधित्व करती हैं।

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
0
Ayoub Bani 1 सितंबर 2019, 07:42