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