Update static/usage/v8/toggle/helper-error/react.md

Co-authored-by: Brandy Smith <[email protected]>

Author: thetaPC

static/usage/v8/toggle/helper-error/react.md

@@ -1,49 +1,35 @@
 ```tsx
 import React, { useRef, useState } from 'react';
-import { IonToggle, IonButton, ToggleCustomEvent } from '@ionic/react';
+import { IonToggle, ToggleCustomEvent } from '@ionic/react';
 
 function Example() {
+  const wifiRef = useRef<HTMLIonToggleElement>(null);
+
   const [isTouched, setIsTouched] = useState<boolean>(false);
   const [isValid, setIsValid] = useState<boolean | undefined>();
-
-  const wifiRef = useRef<HTMLIonToggleElement>(null);
+  const [isChecked, setIsChecked] = useState<boolean>(true);
 
   const validateToggle = (event: ToggleCustomEvent<{ checked: boolean }>) => {
     setIsTouched(true);
+    setIsChecked(event.detail.checked);
     setIsValid(event.detail.checked);
   };
 
-  const submit = (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-
-    if (wifiRef.current) {
-      validateToggle({ detail: { checked: wifiRef.current.checked } } as ToggleCustomEvent<{
-        checked: boolean;
-      }>);
-    }
-  };
-
   return (
     <>
-      <form onSubmit={submit}>
-        <IonToggle
-          ref={wifiRef}
-          className={`${isValid ? 'ion-valid' : ''} ${isValid === false ? 'ion-invalid' : ''} ${
-            isTouched ? 'ion-touched' : ''
-          }`}
-          helperText="This needs to be enabled"
-          errorText="This field is required"
-          onIonChange={(event) => validateToggle(event)}
-        >
-          I agree to the terms and conditions
-        </IonToggle>
-
-        <br />
-
-        <IonButton type="submit" size="small">
-          Submit
-        </IonButton>
-      </form>
+      <IonToggle
+        ref={wifiRef}
+        className={`${isValid ? 'ion-valid' : ''} ${
+          isValid === false ? 'ion-invalid' : ''
+        } ${isTouched ? 'ion-touched' : ''}`}
+        helperText="Enable to connect to available networks"
+        errorText="Must be enabled to access the internet"
+        justify="space-between"
+        checked={isChecked}
+        onIonChange={(event) => validateToggle(event)}
+      >
+        I agree to the terms and conditions
+      </IonToggle>
     </>
   );
 }