Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
var NewStatus = React.createClass({
render: function() {
return <div className="new-status">
<h2>New monolog</h2>
<form action="" onSubmit={this.handleSubmit}>
<textarea ref="text" /><br />
<input type="submit" value="Post" />
</form>
</div>;
},
handleSubmit: function(e) {
e.preventDefault();
var self = this;
var $text = $(React.findDOMNode(this.refs.text));
$.ajax({
url: '/status',
type: 'POST',
dataType: 'json',
data: { text: $text.val() },
success: function(data) {
self.props.onCreate(data);
$text.val('');
}
});
}
});
var App = React.createClass({
getInitialState: function() {
return {items: []};
},
render: function() {
return <div className="app">
<NewStatus onCreate={this.handleCreate} />
<div className="statuses">
<h2>Monologs</h2>
<ul>{this.state.items.map(function(item) {
return <li>{item.text}</li>;
})}</ul>
</div>
</div>;
},
handleCreate: function(data) {
this.setState({
items: this.state.items.concat(data)
});
}
});
React.render(<App />, document.body);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.