React es una librería JavaScript conocida por permitirnos desarrollar interfaces de usuario en proyectos SPA o single page application. Esto quiere decir que la mayoría de acciones que desarrollamos con la librería se enfocan en el usuario y sus acciones. En este post, te enseñaremos cómo crear un contador de palabras en React, un elemento de feedback importante para el usuario.
¿Cómo crear un contador de palabras en React?
Hay muchos escenarios en los que podemos necesitar crear un contador de palabras en React. Sin embargo, el más conocido es cuando hacemos un tweet. Desde la creación de Twitter, esta aplicación ha promovido la creación de posts cortos con un número limitado de caracteres. Para llevar esto a cabo, cada vez que creamos un tweet debemos saber cuántos caracteres estamos escribiendo del número total.
Para crear un contador de palabras en React como el de Twitter, primero deberemos crear un límite de caracteres que sea el segundo número. Para ello, podemos crear una constante maxcharacters:
const MAX CHARACTERS = 280; Ahora, deberemos programar que el número de caracteres que vaya escribiendo el usuario se vaya mostrando en la pantalla. Para ello, podemos acceder a los datos del estado que está guardando el input de texto. Es decir, no necesitamos crear ningún nuevo estado, pues podemos hacer nuestro cálculo a partir de lo que ya está codificado.
Te aconsejamos tener siempre presente el código que ya has desarrollado antes de ejecutar una nueva acción. Es muy común que olvidemos que ya hemos creado un camino para ejecutar ciertas acciones. Un buen código es aquel que es eficiente y reutiliza lo que ya se ha construido. Nuestro estado y función de cambio se ve así:
const [content, setContent] = useState ( ' ' );
const handleChange = event => {
setContent(event.target.value);
);Entonces, podemos crear una variable characters que tome la longitud de este estado y la compare con la longitud máxima:
const characters = '${content.lenght} / ${MAX_CHARACTERS}';Ahora que tenemos nuestra variable characters, podemos pasarla en el punto de nuestro return que queramos. Nosotros hemos decidido pasarla por el span con el nombre de clase “newTweetPage-characters”, que hemos definido en nuestro post sobre programar un nuevo post en React.
Con los pasos anteriores, hemos logrado crear un contador de palabras en React. Ahora, si realmente quieres hacer algo como lo que hace Twitter, deberás limitar el número de caracteres que un usuario puede introducir en su input. Esto es muy sencillo y se logra con el atributo maxLength, al que le podemos dar al input de textarea.
maxLength= {MAX_CHARACTERS}Incluso podrías introducir una propiedad que defina un número mínimo de caracteres. Antes de que se cumpla este mínimo, podrías deshabilitar el botón de mandar el tweet. Como puedes ver, la realidad es que hay muchas opciones con las que puedes jugar a la hora de crear un contador de palabras en React.
const buttonDisabled = content.length < 5Ahora que sabes cómo crear un contador de palabras en React, te invitamos a seguir aprendiendo sobre las posibilidades de esta librería JavaScript. Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva donde aprenderás a desarrollar con herramientas como JavaScript, HTML, CSS y React. ¡No te lo pierdas!
