var Example = React.createClass({
getInitialState: function(){
return ({
hashtag: 'nofilter',
mediacount: 0
})
},
onUpdate: function(val){
this.setState({
hashtag: val
});
},
render: function() {
return (
<div>
<HashTagInput onUpdate={this.onUpdate} hashtag={this.state.hashtag} />
<HashTagCount hashtag={this.state.hashtag} />
</div>
)
}
});
var HashTagInput = React.createClass({
countHashTag: function() {
var newHashTag = this.refs.inputHashTag.getDOMNode().value;
this.props.onUpdate(newHashTag);
},
render: function () {
return (
<div>
<input id="inputHashTag" ref="inputHashTag" type="text" placeholder="Insert a hashtag" defaultValue={this.props.hashtag}/>
<button onClick={this.countHashTag} >Count</button>
</div>
);
}
});
var HashTagCount = React.createClass({
getInitialState: function(){
return ({
mediacount: (this.props.mediacount ? this.props.mediacount : 0)
})
},
componentDidMount: function () {
this.getHashTagCount(this.props.hashtag);
},
componentWillReceiveProps: function(props){
this.getHashTagCount(props.hashtag);
},
getHashTagCount: function(hashtag) {
$.ajax({
type: "GET",
"method": "GET",
url: 'https://api.instagram.com/v1/tags/' + hashtag + '?client_id=06900e749be644729a42b3857dc07822',
dataType: "jsonp",
success: function (result) {
var count = result.data.media_count
this.setState({
hashtag: result.data.name,
mediacount: count.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
});
}.bind(this)
});
},
render: function () {
return ( < div >
{this.state.mediacount} tagged with <em>{this.state.hashtag}</em>
</div>
);
}
});
React.render(<Example />, document.getElementById('input'));
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id="input"></div>
body {
font-family:Arial;
}
div {
clear:both;
width:100%;
text-align:center;
margin-top:2em;
}
div > div {
clear:both;
}
input[type=text] {
width:70%;
float:left;
}
button[type=submit] {
width:20%;
float:right;
}
External resources loaded into this fiddle: