Crear un contador de palabras en React

Autor: | Última modificación: 30 de septiembre de 2022 | Tiempo de Lectura: 2 minutos
Temas en este post:

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 < 5

¿Qué sigue?

Ahora 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!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Trabajo? Aprende a programar y consíguelo.

¡No te pierdas la próxima edición del Aprende a Programar desde Cero Full Stack Jr. Bootcamp!

 

Prepárate en 4 meses, aprende las últimas tecnologías y consigue trabajo desde ya. 

 

Solo en España hay más de 120.400 puestos tech sin cubrir, y con un sueldo 11.000€ por encima de la media nacional. ¡Es tu momento!

 

🗓️ Próxima edición: 13 de febrero

 

Reserva tu plaza descubre las becas disponibles.

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!