fixed issues related to structuring checkbox group

Author: prasanna1211

src/checkboxGroup/index.js

@@ -30,20 +30,23 @@ class CheckboxGroup extends React.Component {
       inline,
     } = this.props;
 
-    const classNames = cx(styles['checkbox-group'], { inline });
+    const classNames = cx(styles['checkbox-group']);
     return options.map(option => (
-      <div key={option.label} className={classNames}>
-        <div className={styles['each-check']}>
-          <Checkbox
-            {...option}
-            checked={this.state.isChecked[option.label]}
-            onClick={this.handleCheckListChange}
-          />
-          <label className={styles['each-label']}>
-            {option.label}
-          </label>
+      <React.Fragment key={option.label}>
+        <div className={classNames}>
+          <div className={cx(styles['each-check'], { inline })}>
+            <Checkbox
+              {...option}
+              checked={this.state.isChecked[option.label]}
+              onClick={this.handleCheckListChange}
+            />
+            <label className={styles['each-label']}>
+              {option.label}
+            </label>
+          </div>
         </div>
-      </div>
+        <div className="clearfix" />
+      </React.Fragment>
     ));
   }
 }

src/checkboxGroup/style.scss

@@ -1,8 +1,15 @@
 :local(.checkbox-group) {
 
+  .clearfix {
+    clear: both;
+  }
 }
 
 :local(.each-check) {
+  &.inline {
+    float: left;
+    margin-right: 25px;
+  }
   margin-bottom: 10px;
 }
 

src/index.js

@@ -21,6 +21,7 @@ const CheckboxDemo = () => (
   <React.Fragment>
     <CheckboxGroup
       options={options}
+      inline
     />
   </React.Fragment>
 );