var TextCounter = React.createClass({
propTypes: {
text: React.PropTypes.string
},
getInitialState: function() {
return {
text: this.props.text
}
},
_textChange: function(ev) {
this.setState({
text: ev.target.value
});
},
render: function() {
return React.DOM.div(
null,
React.DOM.textarea(
{
rows: 5,
cols: 30,
value: this.state.text,
onChange: this._textChange
}
),
React.DOM.p(
null,
React.DOM.small(null, 'Count: ' + this.state.text.length)
)
)
}
});
React.render(
React.createElement(TextCounter, {
text: 'Type something'
}),
document.getElementById('text-counter')
);
<div id="text-counter"></div>
External resources loaded into this fiddle: