diff --git a/docs/09.2-form-input-binding-sugar.md b/docs/09.2-form-input-binding-sugar.md index 1f2c196c..71cf4c55 100644 --- a/docs/09.2-form-input-binding-sugar.md +++ b/docs/09.2-form-input-binding-sugar.md @@ -33,14 +33,14 @@ Here's a simple form example without using `ReactLink`: var NoLink = React.createClass({ getInitialState: function() { - return {value: 'Hello!'}; + return {message: 'Hello!'}; }, handleChange: function(event) { - this.setState({value: event.target.value}); + this.setState({message: event.target.value}); }, render: function() { - var value = this.state.value; - return ; + var message = this.state.message; + return ; } }); ``` @@ -53,10 +53,10 @@ This works really well and it's very clear how data is flowing, however with a l var WithLink = React.createClass({ mixins: [React.addons.LinkedStateMixin], getInitialState: function() { - return {value: 'Hello!'}; + return {message: 'Hello!'}; }, render: function() { - return ; + return ; } }); ``` @@ -82,14 +82,14 @@ There are two sides to `ReactLink`: the place where you create the `ReactLink` i var WithoutMixin = React.createClass({ getInitialState: function() { - return {value: 'Hello!'}; + return {message: 'Hello!'}; }, handleChange: function(newValue) { - this.setState({value: newValue}); + this.setState({message: newValue}); }, render: function() { var valueLink = { - value: this.state.value, + value: this.state.message, requestChange: this.handleChange }; return ; @@ -107,10 +107,10 @@ As you can see, `ReactLink` objects are very simple objects that just have a `va var WithoutLink = React.createClass({ mixins: [React.addons.LinkedStateMixin], getInitialState: function() { - return {value: 'Hello!'}; + return {message: 'Hello!'}; }, render: function() { - var valueLink = this.linkState('value'); + var valueLink = this.linkState('message'); var handleChange = function(e) { valueLink.requestChange(e.target.value); };