Ad

React - ES6 - Dynamically Watching The Total Character Length Of A Textarea

- 1 answer

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?

Ad

Answer

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

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

Example

Ad
source: stackoverflow.com
Ad