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>

Answer 1

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} />)}