加载一半数组/数据集然后另一半加载reactjs

Question

假设我有10篇文章的数组

	var articles = [{
	      "id": "0",
	      "title": "Article 1",
	      "image": "http://placehold.it/300x250&text=image 1" {
	        "id": "1",
	        "title": "Article 2",
	        "image": "http://placehold.it/300x250&text=image 2"
	      },
	      {
	        "id": "2",
	        "title": "Article 3",
	        "image": "http://placehold.it/300x250&text=image 3"
	      },
	      {
	        "id": "3",
	        "title": "Article 4",
	        "image": "http://placehold.it/300x250&text=image 4"
	      },
	      {
	        "id": "4",
	        "title": "Article 5",
	        "image": "http://placehold.it/300x250&text=image 5"
	      },
	      {
	        "id": "5",
	        "title": "Article 6",
	        "image": "http://placehold.it/300x250&text=image 6"
	      },
	      {
	        "id": "6",
	        "title": "Article 7",
	        "image": "http://placehold.it/300x250&text=image 7"
	      },
	      {
	        "id": "7",
	        "title": "Article 8",
	        "image": "http://placehold.it/300x250&text=image 8"
	      },
	      {
	        "id": "8",
	        "title": "Article 9",
	        "image": "http://placehold.it/300x250&text=image 9"
	      },
	      {
	        "id": "9",
	        "title": "Article 10",
	        "image": "http://placehold.it/300x250&text=image 10"
	      }
	    ]

我希望在前5个加载，然后在接下来的5个中加载一个按钮，如何在reatjs中执行此操作。

到目前为止，我正在装载所有这10个......

var Article = React.createClass({
		
		render: function () {
			return (
				<div>
				   <h1>{this.props.title}</h1>
				   
				   <img src={this.props.image}  alt="" /> 
				  
				   	<button onClick={this.props.onClick}>Delete Article</button>
				   
				</div>	
			)
		}
	})
	
	var App = React.createClass({
		
		deleteArticle: function (article){
			this.state.articles.splice(this.state.articles.indexOf(article),1);
			
			this.setState(this.state);
		},
		
		getInitialState: function () {
			return {
				articles: articles	
			}
		},
		
		render: function () {
			var that = this;
			return (
				<div>
					{this.state.articles.map(function (article) {
						return (
						 <Article onClick={that.deleteArticle.bind(null, article)} title={article.title} image={article.image}></Article>
						)
					})}
				</div>	
			)
		}
	})

但是我想加载5然后在下一个5等处加载按钮？

任何人都可以帮忙吗？

欢呼声