title: How to achieve MVVM like frameworks in Reactjs
body: <p>I have a simple problem. I think, I misunderstand the ReactJS usage.</p>
  
  <p>I want to author some low level <strong>reusable components</strong> to build my forms in a standard layout.</p>
  
  <p>Consider something like this.</p>
  
  <pre><code>    var Note = React.createClass({
  
      getInitialState: function() {
          return ActionData.Model; //the form model
      },
  
      render: function () {
          var model = this.state;
          return (
              &lt;Fieldset id="testId" Legend={Language.Note}&gt;
                  &lt;SingleColumn Lable="Note"&gt;
                      &lt;Textarea value={model.Text} /&gt;
                  &lt;/SingleColumn&gt;
                  &lt;TwinColumn RightLable="Date" LeftLable=""&gt;
                      &lt;DatePicker ReadOnly="true" Date={model.DisplayDate} /&gt;
                      &lt;Checkbox Title="show " /&gt;
                  &lt;/TwinColumn&gt;
                  &lt;input type="button" value="Save" onClick={this.save} /&gt;
              &lt;/Fieldset&gt;
              )
      },
  
      save: function () {
          var model = this.state;
          //save the model here ... .
      }
  });
  
  $(function () {
      ReactDOM.render(&lt;Note /&gt;, $("#myContent")[0]);
  })
  </code></pre>
  
  <p>And for instance in 'Textarea' component</p>
  
  <pre><code>    var Textarea = React.createClass({
  
      getInitialState: function() {
          return {
              value: this.props.value
          };
      },
  
      render: function () {
          return &lt;input type="text" className="form-control" value={this.state.value} onChange={e =&gt; this.setState({value: e.target.value})} /&gt;
      }
  });
  </code></pre>
  
  <p>How can I update the 'Note' component state on 'Textarea' change state? (performing something like MVVM frameworks).</p>
  
  <p>Am I walking in the correct direction?!</p>
  
  <p>Is ReactJs capable of doing such things !?</p>