React Desing Pattern: Control Props

Pour ce design pattern on va avoir besoin de la notion de 'Controlled Component'.
Prenons comme exemple un formulaire avec un champ input, la valeur et le changement de ce champ est géré par le DOM.
Dans le cas d'un 'Controlled Component', c'est nous qui géront le stockage de la valeur et le onChange.

<input type="text" value={name} onChange={handleName} />

Tout simplement, passons à l'implémentation:

Step 1: Initiation du state
const [name, setName] = useState("");

Step 2: gestion du changement de valeur

const handleName = (event) => {
    setName(event.target.value);
  };

Step 3: controle de l'élément

<input type="text" value={name} onChange={handleName} />