How to create a character counter in react?

Question

I am new and creating something with react for the first time. i want to create a character counter in a textarea in react. The counter should have a maximum length of 800 characters. i created this code, but i don't know how to include const without getting an error message.

import React from 'react'
import { Component } from 'react';

function Counter() {
    return (
      
const rezensionTextArea = document.getElementById('rezension_textarea');
        const zeichenCounter = document.getElementById('zeichen_counter');

rezensionTextArea.addEventListener('input', () => {
         const zeichen = rezensionTextArea.value.length;
         zeichenCounter.textContent = `${zeichen}/800`;
        });
    )
}

export default Counter

Answer 1

Here is an example of textarea with react and useState hook. useState return an array of getter and setter of a state. the text value is stored in text and updated with setState. textarea consume the state in handler with value and onChange parameter respectively.

import './App.css';
import { useState } from 'react';

function App() {
  const MAX_TEXT_LENGTH = 800;
  const [text, setText] = useState("");

  function handleTextAreaChange(event) {
    const value = event.target.value;
    if (value.length <= MAX_TEXT_LENGTH) {
      setText(value);
    }
  }
  return (
    <div className="App">
      <div>
        {`${text.length}/${MAX_TEXT_LENGTH}`}
      </div>
      <textarea rows={16} cols={64}
        onChange={handleTextAreaChange}
        value={text}>
      </textarea>
    </div>
  );
}

export default App;

Answer 2

welcome to react :) That's not how it supposed to be, if you want to create a component with counter it should look like this:

function Counter() {
const [count, setCount] = useState(0);

return (
    <div>
        {/*This will increment count by 1*/}
        <input type={"button"} value={"Click me"} onClick={() => setCount(count + 1)} />
        {/*This will decrement the count by 1*/}
        <input type={"button"} value={"Click me"} onClick={() => setCount(count - 1)} />
        {/*This will display the count*/}
        {count}
    </div>


)}

Just play along with it, but this is how you update the dom in React

Answer 3

Events in React are handled through the onEvent properties in the rendered JSX. https://reactjs.org/docs/handling-events.html
The maxLength attribute specifies the maximum count of a <input> & <textarea>.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-maxlength

class Counter extends React.Component {

    constructor(props) {
        super(props);
        this.state = {text: ''};
    }

    handleTextChange=(evt)=> {
        this.setState({ text: evt.target.value });
    }

    render() {
        return <div className="App">
            <textarea value={this.state.text} onChange={this.handleTextChange} maxLength="800" ></textarea>
            <p>count: {this.state.text.length}</p>
        </div>
    }
}