Skip to content

Commit

Permalink
Interactivity and Dynamic UIs Docs page updated with ES6 Example (fac…
Browse files Browse the repository at this point in the history
…ebook#6832)

* Interactivity and Dynamic UIs Pages ES6 Example

* Change bind handler
  • Loading branch information
vedatmahir authored and jimfb committed May 22, 2016
1 parent d955ee9 commit c7ef0af
Showing 1 changed file with 15 additions and 11 deletions.
26 changes: 15 additions & 11 deletions docs/docs/03-interactivity-and-dynamic-uis.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,22 +11,26 @@ You've already [learned how to display data](/react/docs/displaying-data.html) w
## A Simple Example

```javascript
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
class LikeButton extends React.Component {
constructor() {
super();
this.state = {
liked: false
}
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? 'like' : 'haven\'t liked';
}
render() {
const text = this.state.liked ? 'like' : 'haven\'t liked';
return (
<p onClick={this.handleClick}>
<div onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
</div>
);
}
});
}

ReactDOM.render(
<LikeButton />,
Expand Down

0 comments on commit c7ef0af

Please sign in to comment.