React jsでループを終了する方法

Question

私は、ホームページにブログを表示するためのjsxコンポーネントを持っています.3つの部門のブログ投稿が表示され、さらに詳細なボタンをクリックすると他の新しいパッケージが表示されます。私の問題は、さらに5つのブログの投稿を追加しています、ボタンは2,3,4などです。だから私はどのようにbreak.Myコードを使用することができますまだここにあります。

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

Answer 1

あなたはポストのサブ配列を取得するためにスライス機能を使用することができます。

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