Contador de Caracteres
Parte da seção Fundamentos do Journey de React da Coddy — lição 30 de 42.
Como o texto é estado, você pode calcular com ele a cada render. Contadores de tamanho no estilo Tweet têm apenas uma linha:
<p>{message.length} characters</p>Nenhum estado adicional é necessário: message.length é derivado do estado existente, recalculado automaticamente a cada pressionamento de tecla. Regra prática: se você pode calculá-lo a partir do estado que já possui, não o armazene no estado.
Desafio
FácilCrie uma caixa de bio com um contador de comprimento em tempo real.
- Faça com que o
input(id="bio") seja controlado pelo estadobio(inicie vazio). - O parágrafo (
id="length") exibeN charactersonde N é o tamanho atual da bio (calculado, não armazenado).
Experimente você mesmo
<!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>
Teste seus conhecimentosEsta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.
Todas as lições de Fundamentos
1Conheça o React
O que é o React?Seu primeiro componenteRegra do elemento pai únicoJSX não é HTMLRecapitulação: Conheça o React2Expressões JSX
ChavesMatemática nas ChavesChaves em AtributosChamando Funções no JSXRecapitulação: Expressões JSX3Componentes
Blocos de ConstruçãoSeu Segundo ComponenteReutilize ComponentesComponha uma PáginaRecapitulação: Componentes6Formulários e Entradas
Inputs ControladosEcoar a EntradaContador de CaracteresBotão LimparRecapitulando: Formulários e Entradas