Un esempio di Hook useState – TodoList

Come utilizzare lo Hook useState

Supponiamo di voler creare un componente funzionale che gestisca una lista di cose da fare. Iniziamo importando “useState” dalla libreria React:

import React, { useState } from 'react';

Successivamente, definiamo il nostro componente funzionale "TodoList" con la notazione di funzione:

function TodoList() {
  // qui definiamo lo stato locale "todos" con un array vuoto come valore iniziale,
  // e la funzione "setTodos" per aggiornarlo
  const [todos, setTodos] = useState([]);
  
  // funzione chiamata quando l'utente aggiunge un nuovo todo alla lista
  function handleAddTodo() {
    // creiamo un nuovo todo
    const newTodo = { id: Date.now(), text: 'Nuovo todo', completed: false };
    // aggiungiamo il nuovo todo alla lista
    setTodos([...todos, newTodo]);
  }

  return (
    <div>
      <h1>Lista cose da fare</h1>
      <button onClick={handleAddTodo}>Aggiungi todo</button>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </div>
  );
}

Come si può notare, abbiamo utilizzato lo “useState” hook per definire lo stato locale “todos” e la funzione “setTodos” per aggiornarlo. In questo caso, abbiamo inizializzato lo stato con un array vuoto.

Abbiamo quindi definito la funzione “handleAddTodo” che viene chiamata quando l’utente clicca sul pulsante “Aggiungi todo”. Questa funzione crea un nuovo todo con un id generato in base al timestamp attuale, un testo di default “Nuovo todo” e uno stato “completed” inizialmente impostato a “false”. Successivamente, utilizziamo la funzione “setTodos” per aggiungere il nuovo todo alla lista degli “todos”.

Infine, il componente restituisce il markup JSX che mostra la lista degli “todos” con il relativo testo, e un pulsante “Aggiungi todo” che, quando premuto, aggiunge un nuovo “todo” alla lista.

In sintesi, lo “useState” hook è stato utilizzato per gestire lo stato locale del componente “TodoList”. Grazie a questo hook, abbiamo potuto definire uno stato iniziale vuoto e una funzione per aggiornarlo. Inoltre, abbiamo utilizzato la funzione di aggiornamento dello stato per aggiungere nuovi “todo” alla lista ogni volta che l’utente clicca sul pulsante “Aggiungi todo”.