How to create a counter that calculates the remaining characters?

Question

I'm trying to create a counter that calculates the remaining characters but I cannot. I want to set the allowed characters to 100 and then subtract the number of characters written by the user from the 100, I wrote this


    class TextArea extends Component
    {

        state =
        {

            chars: 0,

        }

        charsRemaining()
        {

            var myTextArea = document.querySelector("textarea").value.length;


            this.setState({chars: this.state.chars - myTextArea});

            return myTextArea;
        }

        render()
        { 

            return (

                <div>

                    <textarea onKeyDown={this.charsRemaining()} cols="60" rows="10"></textarea>

                    <span>{this.state.chars}</span>

                </div>

            );

        };

    };

I thought if I set a variable to document.querySelector("textarea").value.length that would work. But it seems that I cannot access elements DOM this way in ReactJS. Any suggestions?

did your question get answered? – dqhendricks Jul 16 '19 at 18:36 — dqhendricks, Jul 16 '19 at 18:36

score 0 · Answer 1 · answered Jul 15 '19 at 19:50

0

You don't have to calculate the remaining characters. With the implementation you are using with a plain textarea tag you can just use the maxlength attribute to specify the maximum number of characters allowed, like so:

<textarea maxLength="100" cols="60" rows="10"></textarea>

answered Jul 15 '19 at 19:50

Nicholas Domenichini

790
1
6
11

I know, but I want to display it to the user just like Twitter. – K. M. Jul 15 '19 at 19:54

dqhendricks · Answer 2 · 2019-07-15T20:21:35.390

One of the problems may be that you are executing the function by putting () at the end. So instead of setting the value to a function, you are setting the value to the function's results.

So instead of this:

onKeyDown={this.charsRemaining()}

Try this:

onKeyDown={this.charsRemaining}

Another thing you might try is using the synthetic event passed to the function to get the value length.

charsRemaining( e ) {
    var myTextAreaLength = e.target.value.length;
    this.setState({chars: this.state.chars - myTextAreaLength});
}

I think there are other problems with the way you are constructing your component for React. You may want to find a tutorial of a working react component, and how they set the initial state, and bind functions to events. Or perhaps look at the answer to this question: How to get input textfield values when enter key is pressed in react js?

How to create a counter that calculates the remaining characters?

2 Answers2