Contatore di clic

Fa parte della sezione Fondamenti del percorso React di Coddy. Lezione 23 di 42.

Lo stato ha bisogno di un trigger, di solito un evento. Collega una funzione a un pulsante con onClick e modifica lo stato al suo interno:

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);
    return (
        <div>
            <button onClick={() => setCount(count + 1)}>+1</button>
            <p>{count}</p>
        </div>
    );
}

Segui un clic lungo il ciclo: clicca → setCount(count + 1) → React esegue di nuovo il rendering → il paragrafo mostra il nuovo conteggio. Nota la funzione freccia: onClick={() => setCount(count + 1)} passa una funzione da chiamare in seguito. Scrivere onClick={setCount(count + 1)} la chiamerebbe immediatamente durante il rendering: un classico bug.

Sfida

Facile

Realizza il classico contatore.

Aggiungi lo stato: count che parte da 0 (l'importazione è già pronta).
Mostra il conteggio attuale all'interno dello span con id="count".
Fai in modo che il pulsante +1 incrementi il conteggio di 1 a ogni clic.

Provalo tu

<!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>