A single output data is OK, how to loop the data in the output interface? Solve?
original
<div id="demo"></div>
<script type="text/babel">
var UserGist = React.createClass({
getInitialState:function(){
return {
username: "",
lastGistUrl: ""
}
},
componentDidMount:function(){
$.get(this.props.source, function(result) {
var datas = result[0];
this.setState({
username: datas.owner.login,
lastGistUrl: datas.html_url
})
}.bind(this));
},
render:function(){
return (
<div>
<em>{this.state.username}</em> : {this.state.lastGistUrl}
</div>
)
}
});
ReactDOM.render(
<UserGist source="https://api.github.com/users/octocat/gists" />,
document.getElementById("demo")
);
</script>success
<div id="demo"></div>
<script type="text/babel">
var UserGist = React.createClass({
getInitialState:function(){
return {
data:[]
}
},
componentDidMount:function(){
$.get(this.props.source, function(datas) {
this.setState({
data:datas
});
}.bind(this));
},
render:function(){
return (
<div>
{
this.state.data.map(function(item,index){
return (
<div key={index}>
<em>{item.owner.login}</em> : {item.html_url}
</div>
)
})
}
</div>
)
}
});
ReactDOM.render(
<UserGist source="https://api.github.com/users/octocat/gists" />,
document.getElementById("demo")
);
</script>