title: ReactJS: How to update a component from another
body: <p>I'm trying to write a simple <code>textarea</code> char counter widget with <a href="http://facebook.github.io/react/" rel="noreferrer">ReactJS</a> to learn how to use it, but I'm now sure how I can set value by fire <code>textarea onChange</code> event.</p>
  
  <p>This is how I've wrote the app:</p>
  
  <pre><code>/**
   * @jsx React.DOM
   */
  
  var EditorWidget = React.createClass({
      render : function() {
          return (
              &lt;div className="editor-widget"&gt;
                  &lt;h4 className="title"&gt;Titolo articolo&lt;/h4&gt;
                  &lt;TextArea maxLength={this.props.maxLength}/&gt;
                  &lt;footer&gt;
                      &lt;TextStatus maxLength={this.props.maxLength} currentLength={this.props.currentLength}/&gt;
                      &lt;ActionButton /&gt;
                  &lt;/footer&gt;
              &lt;/div&gt;
          );
      }
  });
  
  var TextArea = React.createClass({
      onTextChanged : function(event) {
          // how to update currentLength for TextStatus component?
          this.props.currentLength = event.target.value.length;
      },
      render : function() {
          return (
              &lt;textarea onChange={this.onTextChanged} maxLength={this.props.maxLength} placeholder="Lampadario con catino romagnolo"&gt;&lt;/textarea&gt;
          );
      }
  });
  
  var TextStatus = React.createClass({
      render : function() {
          return (
              &lt;div className="info"&gt;
                  Caratteri&lt;span className="small-left-margin"&gt;{this.props.currentLength} / {this.props.maxLength}&lt;/span&gt;
              &lt;/div&gt;
          );
      }
  });
  
  var ActionButton = React.createClass({
      render : function() {
          return (
              &lt;div className="action remove"&gt;
                  Rimuovi elemento
              &lt;/div&gt;
          );
      }
  });
  
  React.renderComponent(
      &lt;EditorWidget maxLength="15" currentLength="0"/&gt;,
      document.getElementById("container")
  );
  </code></pre>
  
  <p>From <code>onTextChanged</code> method owned by <code>TextArea</code> component I'm not sure on how I can change the state of <code>TextStatus</code> component, how can I set the <code>currentLength</code> of <code>TextStatus</code> component?</p>