docs(Checkbox): minor rework to use hooks, better show controlled mode (#4328)

* docs(Checkbox): minor rework to use hooks, better show controlled mode

* minor update

Author: layershifter

docs/src/examples/modules/Checkbox/Types/CheckboxExampleRadioGroup.js

@@ -1,37 +1,36 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { Form, Checkbox } from 'semantic-ui-react'
 
-export default class CheckboxExampleRadioGroup extends Component {
-  state = {}
-  handleChange = (e, { value }) => this.setState({ value })
+function CheckboxExampleRadioGroup() {
+  const [value, setValue] = React.useState('this')
 
-  render() {
-    return (
-      <Form>
-        <Form.Field>
-          Selected value: <b>{this.state.value}</b>
-        </Form.Field>
-        <Form.Field>
-          <Checkbox
-            radio
-            label='Choose this'
-            name='checkboxRadioGroup'
-            value='this'
-            checked={this.state.value === 'this'}
-            onChange={this.handleChange}
-          />
-        </Form.Field>
-        <Form.Field>
-          <Checkbox
-            radio
-            label='Or that'
-            name='checkboxRadioGroup'
-            value='that'
-            checked={this.state.value === 'that'}
-            onChange={this.handleChange}
-          />
-        </Form.Field>
-      </Form>
-    )
-  }
+  return (
+    <Form>
+      <Form.Field>
+        Selected value: <b>{value}</b>
+      </Form.Field>
+      <Form.Field>
+        <Checkbox
+          radio
+          label='Choose this'
+          name='checkboxRadioGroup'
+          value='this'
+          checked={value === 'this'}
+          onChange={(e, data) => setValue(data.value)}
+        />
+      </Form.Field>
+      <Form.Field>
+        <Checkbox
+          radio
+          label='Or that'
+          name='checkboxRadioGroup'
+          value='that'
+          checked={value === 'that'}
+          onChange={(e, data) => setValue(data.value)}
+        />
+      </Form.Field>
+    </Form>
+  )
 }
+
+export default CheckboxExampleRadioGroup

docs/src/examples/modules/Checkbox/Usage/CheckboxExampleRemoteControl.js

@@ -1,20 +1,21 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { Button, Checkbox } from 'semantic-ui-react'
 
-export default class CheckboxExampleRemoteControl extends Component {
-  state = { checked: false }
-  toggle = () => this.setState((prevState) => ({ checked: !prevState.checked }))
+function CheckboxExampleRemoteControl() {
+  const [checked, setChecked] = React.useState(false)
 
-  render() {
-    return (
-      <div>
-        <Button onClick={this.toggle}>Toggle it</Button>
-        <Checkbox
-          label='Check this box'
-          onChange={this.toggle}
-          checked={this.state.checked}
-        />
-      </div>
-    )
-  }
+  return (
+    <div>
+      <Button onClick={() => setChecked((prevChecked) => !prevChecked)}>
+        Toggle it
+      </Button>
+      <Checkbox
+        label='Check this box'
+        onChange={(e, data) => setChecked(data.checked)}
+        checked={checked}
+      />
+    </div>
+  )
 }
+
+export default CheckboxExampleRemoteControl