title: Word Counter with React
body: <p>I'm trying to write a word counter with React.
  The idea is that once you exceed the maximum number of words a warning will appear and prevent the user to insert more characters.
  My idea was to use the maxlength attribute. Once the words needed and the words written are the same amount, the characters will be counted and the maxlength attribute activated through state.</p>
  
  <p>The maxlength attribute doesn't work properly. How can I fix it?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="app"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>REACT</p>
  
  <pre><code>class MyComponent extends React.Component {
    constructor(props){
      super(props);
      this.state = {
        firstValue: '',
        secondValue: '',
        needWords: '',
        wordCount: '',
        limWords: null,
      }
      this.firstHandle = this.firstHandle.bind(this)
      this.handleSubmit = this.handleSubmit.bind(this)
      this.secondHandle = this.secondHandle.bind(this)    
    }
    firstHandle(e){
      this.setState({
        firstValue: e.target.value
      })
    }
  
    handleSubmit(e){
      e.preventDefault()
      this.setState({
        needWords: this.state.firstValue
      })
    }
  
    secondHandle(event){
      this.setState({
        secondValue: event.target.value,
        wordCount: event.target.value === '' ? 0 : this.state.secondValue.split(' ').length,
        limWords: (this.state.needWords - this.state.wordCount) &lt; 0 ? this.state.secondValue.length : null
      })
  
    }
  
    render(){
      var result = this.state.needWords - this.state.wordCount;
      let tooManyChars;
      if (result &lt; 0){
        const tooManyCharStyle = {
          color: 'red'
        }
        tooManyChars = &lt;p style={tooManyCharStyle}&gt;You exceeded the maximum number of words!!&lt;/p&gt;;
      }
      return(
       &lt;div&gt;
        &lt;form onSubmit={this.handleSubmit}&gt;
          &lt;p&gt;How many words do you have to write?&lt;/p&gt;
          &lt;input 
            type="text" 
            value={this.state.firstValue}
            onChange={this.firstHandle}&gt;&lt;/input&gt;
          &lt;button type="submit"&gt;Go&lt;/button&gt;
        &lt;/form&gt;
        &lt;form&gt;
          &lt;p&gt;You still have to write {result} words&lt;/p&gt;
          &lt;textarea 
            type="text"
            value={this.state.value}
            onChange={this.secondHandle}
            maxLength={this.state.limWords}&gt;
          &lt;/textarea&gt;
          { tooManyChars }
         &lt;/form&gt;
        &lt;/div&gt;
      );
    }
  }
  
  ReactDOM.render(&lt;MyComponent/&gt;, document.getElementById('app'));
  </code></pre>