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>