Estado Independente

Parte da seção Fundamentos do Journey de React da Coddy — lição 26 de 42.

Precisa se lembrar de duas coisas? Chame useState duas vezes. Cada chamada cria um pedaço de estado completamente independente:

const [cats, setCats] = useState(0);
const [dogs, setDogs] = useState(0);

Atualizar cats renderiza novamente o componente, mas dogs mantém seu valor intocado. Cada estado tem seu próprio setter, e misturá-los é o erro mais comum entre iniciantes: setCats(dogs + 1) compila sem problemas e continua errado.

Desafio

Médio

Gerencie o painel de entrada do abrigo: dois contadores que não interferem um no outro.

Adicione dois estados, cats e dogs, ambos começando em 0.
Exiba-os em id="cats" e id="dogs".
O botão id="add-cat" adiciona um gato; id="add-dog" adiciona um cachorro.

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>