Contar em Etapas
Parte da seção Fundamentos do Journey de React da Coddy — lição 24 de 42.
O setter aceita qualquer novo valor: você não está limitado a +1. Adicione 5, dobre o valor, reinicie para zero:
setPoints(points + 5);
setPoints(points * 2);
setPoints(0);Botões para valores diferentes são apenas manipuladores diferentes no mesmo estado:
<button onClick={() => setPoints(points + 5)}>+5</button>
<button onClick={() => setPoints(0)}>Reset</button>
Desafio
FácilUm jogo dá 5 pontos por moeda.
- Adicione o estado
pointscomeçando em 0 e exiba-o no span comid="points". - O botão
Collect coin(id="coin") adiciona 5 por clique.
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 React