checkbox Enhanced

src/components/Checkbox.tsx

@@ -1,28 +1,71 @@
 import React from "react";
 
-type CheckBoxProps = {
-  /**
-   * here any text can be written to be a label for the checkbox
-   */
-  label: string;
-  /**
-   * onChange callback
-   */
-  onChange?: (value: boolean) => void;
-} & Omit<React.HTMLProps<HTMLInputElement>, "onChange" | "type">;
+/**
+ * [*] A Checkbox Component
+ * 
+ * [*] when the label is clicked => The checkbox will be checked
+ * 
+ * [*] for each item(row) you have to put the following in App.tsx:
+ *    const [isCheckedA, setIsCheckedA] = useState(true);
+      const handleChangeA = (e: React.ChangeEvent<HTMLInputElement>) => {
+      setIsCheckedA(e.target.checked);
+      }; 
+ * 
+ * [*] to create this component, you have to provide the following:
+ * [1] label
+ * [2] if the item is checked or not.
+ * 
+ * [*] A good example will be:
+const App: React.FC = () => 
+{
+    const [isCheckedA, setIsCheckedA] = useState(true);
+    const handleChangeA = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setIsCheckedA(e.target.checked);
+    };
+
+    const [isCheckedB, setIsCheckedB] = useState(true);
+    const handleChangeB = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setIsCheckedB(e.target.checked);
+    };
 
-const CheckBox = ({ className, onChange, label, ...props }: CheckBoxProps) => {
     return (
-    <div className="d-flex align-center">
-      <input
-        onChange={() => onChange && onChange(!props.checked)}
-        className="hover:bg-sky-700 focus:bg-sky-900 active:bg-sky-300 text-black"
-        type="checkbox"
-        {...props}
+      <div className="App">
+        
+        <Checkbox
+          handleChange={handleChangeA}
+          isChecked={isCheckedA}
+          label=" Leo Tolstoy "
         />
-      <label> {label} </label>
+
+        <Checkbox
+          handleChange={handleChangeB}
+          isChecked={isCheckedB}
+          label=" Fyodor Dostoevsky "
+        />
+
       </div>
     );
 };
 
-export default CheckBox;
+*/
+
+interface Props {
+  isChecked: boolean;
+  handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  label: string;
+}
+
+const Checkbox = (props: Props) => {
+  return (
+    <div>
+      <input
+        type="checkbox"
+        id={props.label}
+        checked={props.isChecked}
+        onChange={props.handleChange}
+      />
+      <label htmlFor={props.label}>{props.label}</label>
+    </div>
+  );
+};
+export default Checkbox;