Contador de caracteres
Parte de la sección Fundamentos del Journey de React de Coddy. Lección 30 de 42.
Como el texto es estado, puedes calcular con él en cada render. Los contadores de longitud al estilo Tweet ocupan una sola línea:
<p>{message.length} characters</p>No se necesita estado adicional: message.length se deriva del estado existente y se recalcula automáticamente en cada pulsación de tecla. Regla general: si puedes calcularlo a partir del estado que ya tienes, no lo guardes en el estado.
Desafío
FácilCrea una casilla de biografía con un contador de longitud en tiempo real.
- Haz que el `input` (
id="bio") esté controlado con el estadobio(inicia vacío). - El párrafo (
id="length") muestraN charactersdonde N es la longitud actual de la biografía (calculada, no almacenada).
Pruébalo tú mismo
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>
Ponte a pruebaEsta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.
Todas las lecciones de Fundamentos
1Conoce React
¿Qué es React?Tu primer componenteRegla del padre únicoJSX no es HTMLRecapitulación: Conoce React2Expresiones JSX
LlavesMatemáticas dentro de las llavesLlaves en atributosLlamada a funciones en JSXRecapitulación: Expresiones JSX5Estado y Eventos
¿Qué es el estado?Contador de clicsContar en pasosAlternar con estadoEstado independienteRecapitulación: Estado y eventos8Proyecto: Tarjeta de perfil
Paso 1: Estructura de la tarjetaPaso 2: Tarjeta con PropsPaso 3: Botón de Me gustaPaso 4: Alternador de Seguir3Componentes
Bloques de construcciónTu segundo componenteReutilizar componentesComponer una páginaResumen: Componentes6Formularios e entradas
Entradas controladasReflejar la entradaContador de caracteresBotón de borrarRecapitulación: Formularios e entradas