From c1fc08c879373ec337b7bc9ab6ba5e5de85714c6 Mon Sep 17 00:00:00 2001
From: paullfhc <leflohicpaul@gmail.com>
Date: Tue, 17 Dec 2024 22:30:52 +0100
Subject: [PATCH] =?UTF-8?q?ajout=20de=20commentaires=20=C3=A0=20exemple=5F?=
 =?UTF-8?q?probleme.tsx?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ssr-testing/app/checkbox/exemple_probleme.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/ssr-testing/app/checkbox/exemple_probleme.tsx b/ssr-testing/app/checkbox/exemple_probleme.tsx
index 6ef5992db..25c6472e8 100644
--- a/ssr-testing/app/checkbox/exemple_probleme.tsx
+++ b/ssr-testing/app/checkbox/exemple_probleme.tsx
@@ -1,3 +1,5 @@
+// Ce fichier est une implémentation du problème de base
+// Il génère une erreur "infinite depth"
 // Pour tester le problème, il faut renommer le fichier en page.tsx
 
 'use client';
@@ -6,8 +8,10 @@ import * as React from 'react';
 import * as Checkbox from '@radix-ui/react-checkbox';
 
 export default function Page() {
+  // État (booléen) associé à la checkbox et au div
   const [isChecked, setIsChecked] = React.useState(false);
 
+  // Fonction pour alterner l’état de la checkbox
   const handleCheckedChange = (newChecked: boolean) => {
     console.log('Checkbox checked:', newChecked); // Affiche l'état dans la console
     setIsChecked(newChecked);
@@ -15,8 +19,8 @@ export default function Page() {
 
   return (
     <form>
-      <div onClick={() => setIsChecked((prev) => !prev)}>
-        <Checkbox.Root checked={isChecked} onCheckedChange={handleCheckedChange}>
+      <div onClick={() => setIsChecked((prev) => !prev)}> {/* Alterne l’état*/}
+        <Checkbox.Root checked={isChecked} onCheckedChange={handleCheckedChange}> {/* Associe l'état de la checkbox et la fonction d'inversion de l'état*/}
           [ <Checkbox.Indicator>✔</Checkbox.Indicator> ]
         </Checkbox.Root>
         <span>test</span>