How to terminate loop in map function in React js

Question

I have a jsx component to show blog in home page,3 division blog post will be shown and other new packages will be viewed by clicking view more button. My problem is adding more 5 blog post, button is 2,3,4 etc ,So how can I use break. My code is still here.

  <div class="row">
   {this.state.post.map((post, index) =>
        index < 3 ? (
            <div class="col-md-4">

                <div class="widget widget-blog">
                    <div class="widget-header m-0">
                        <a href="#" class="pull-right f-s-12">view more <i class="fa fa-angle-double-right"></i></a>
                        <h4>Latest Post</h4>
                    </div>
                    <div class="widget-blog-cover">
                        <img src={`/assets/images/${post.post_photo[0]}`} alt="" />
                    </div>
                    <div class="widget-blog-author">
                        <div class="widget-blog-author-image">
                            <img src="assets/images/pp.png" alt="" />
                        </div>
                        <div class="widget-blog-author-info">
                            <h5 class="m-t-0 m-b-1">{this.state.guide.guide_name}</h5>
                            <p class="text-muted m-0 f-s-11">{this.state.guide.address}</p>
                        </div>
                    </div>
                    <div class="widget-blog-content">
                        <h5>{this.state.guide.biobraphy}</h5>
                        <p>
                            {post.status}
                        </p>
                    </div>
                </div>

            </div>
        ) :
            (<div ><Link to="/TourPackageMode">
                <button type="submit" className="btn btn-purple m-r-20 width-100 pull-right" style={{ marginTop: 30 }}>View More</button>
            </Link></div>)
    )}
</div>

Not possible to break out of map, you can use a loop instead — Mr. Alien
– Mr. Alien, Commented Nov 23, 2017 at 3:51

Khiem Tran · Accepted Answer · 2017-11-23 03:54:25Z

0

You can use slice function to get a sub-array of posts.

{posts.slices(current, current + count).map(post => <Post data={post} key={post.id} />)}

answered Nov 23, 2017 at 3:54

Khiem Tran

6,16916 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to terminate loop in map function in React js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related