fixed default state

Author: talhainvenxion

src/ui/layouts/common/FormElement/index.tsx

@@ -52,6 +52,7 @@ export function TextField(props: any) {
 
 export function ToggleField(props: any) {
   const { value, onHandleChange, label, disabled } = props;
+
   return (
     <Box style={{ height: '68px' }}>
       <FlexBox.Row justifyContent="space-between" flexDirection="column">
@@ -61,11 +62,14 @@ export function ToggleField(props: any) {
           </Paragraph>
         </Box>
         <FlexBox.Row className={styles.switchContainer}>
-         <div className={styles.switchLabel}><span>{value ? <>Yes</> : <>No</>}</span></div>
+          <div className={styles.switchLabel}>
+            <span>{value ? <>Yes</> : <>No</>}</span>
+          </div>
           <label className={styles.switch}>
             <input
               type="checkbox"
-              checked={value}
+              defaultChecked={value}
+              // checked={value}
               onChange={onHandleChange}
               disabled={disabled}
             />

src/ui/layouts/stackComponents/ConfigureComponent/CreateComponent/index.tsx

@@ -277,12 +277,19 @@ export const CreateComponent: React.FC<{ flavor: any }> = ({ flavor }) => {
     }
     if (elementSchema.type === 'boolean' && elementSchema.title) {
       return (
-        <Box marginTop='md'>
+        <Box marginTop="md">
           <ToggleField
             {...props}
-            onHandleChange={(key: any, value: any) =>
-              setInputData({ ...inputData, [key]: value })
+            value={
+              inputData[props.name] ? inputData[props.name] : props.default
             }
+            onHandleChange={(event: any, value: any) => {
+              // debugger;
+              setInputData({
+                ...inputData,
+                [props.name]: !inputData[props.name],
+              });
+            }}
           />
         </Box>
       );
@@ -406,12 +413,13 @@ export const CreateComponent: React.FC<{ flavor: any }> = ({ flavor }) => {
             label={'Component Name'}
             value={componentName}
           />
-          <Box marginTop='md'>
+          <Box marginTop="md">
             <ToggleField
               label={'Share Component with public'}
               default={isShared}
+              value={isShared}
               onHandleChange={
-                (key: any, value: any) => setIsShared(value)
+                (key: any, value: any) => setIsShared(!isShared)
                 // setInputData({ ...inputData, ['is_shared']: value })
               }
             />