title: Counting characters from TextArea in ReactJs
body: <p>I have something that I am trying to implement in react, its a simple functionality that calculates how many characters have been typed in to a textarea.</p>
  
  <p>here goes the source code</p>
  
  <pre><code>var WordCount = React.createClass({
  
  getInitialState: function() {
      return{ contacts: [], fullName: "What Ever", smsBalance: 0, command: 'Send Now', charsPerPage: 160, pageCount:0 };
  },
  
  wordCount: function(e){
  
      var currentText = e.target.value;
      //Now we need to recalculate the number of characters that have been typed in so far
      var characterCount = currentText.length;
      var charsPerPageCount = this.state.charsPerPage;
      var unitCount = Math.round(characterCount/charsPerPageCount);
      this.setState({pageCount: unitCount});
  },
  
  render: function() {
      return(
          &lt;div className="md-card"&gt;
  
  
          &lt;div className="user_content"&gt;
              &lt;ul className="uk-margin"&gt;
                  &lt;div className="uk-margin-top"&gt;
  
                      &lt;div className="uk-grid" data-uk-grid-margin=""&gt;
                          &lt;div className="uk-width-medium-1-1"&gt;
                              &lt;div className="md-input-wrapper"&gt;
                              &lt;label htmlFor="Message"&gt;And Now Your Message&lt;/label&gt;
                              &lt;textarea className="md-input autosize_init" cols="30"
                                        data-val="true"
                                        data-val-required="The Message field is required."
                                        id="Message" ref="Message"
                                        rows="3" onChange={this.wordcount} style={{overflowX: "hidden", wordWrap: "break-word", height: 97+"PX"}}&gt;&lt;/textarea&gt;
                              &lt;span className="md-input-bar"&gt;&lt;/span&gt;&lt;/div&gt;
                              &lt;br/&gt;
                              &lt;span className="md-color-grey-300"&gt;
                                  Current cost {this.state.pageCount}
                              &lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
  
  
                  &lt;/div&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  });
  
  ReactDOM.render(&lt;WordCount/&gt;, document.getElementById("PageContent"))
  </code></pre>
  
  <p>Ideally what i intend to achieve is count the number of characters that the user has entered so far in the text area and divide that number by some preset value to get the number of pages and display the number of pages for the users entry to the user</p>
  
  <p>However, the sate variable 'pageCount' remains at zero perpetually. Please What am I doing wrong</p>
  
  <p>Regards
  Peter</p>