React - ES6 - Dynamically watching the total character length of a textarea

Question

Please take a look at this simple fiddle.

It is a single react component, which is a textarea. It displays a counter below the textarea.

The goal is to have the counter update onChange to reflect the new value (total text area length).

Unfortunately, my counter dissappears whenever a change happens. I suspect my this or syntax is off specifically in the middle of this code block:

recalculate() {
  this.setState({
    text: this.state.text.length
  });
}

But React is a new beast and so is ES6. What am I missing here?

Answer 1

You should set state with new value, because now you always set default state value

recalculate(e) {
  this.setState({
     text: e.target.value
  });
}

Example

Answer 2

Your problem is you rely on this.state.text to populate your textarea. Once you type and call recalculate() you change this.state.text to an int and then try and call .length on this int and this causes the value to be undefined. I would recommend this: https://jsfiddle.net/74jufckm/1/

recalculate( event ) {
 this.setState({
    text: event.target.value,
    textLength: event.target.value.length
 });
}

You were also never setting the state of the text again when recalculating.