docs(Dropdown): add dedicated example for controlled Dropdown (#2251)

docs/app/Examples/modules/Dropdown/Usage/DropdownExampleControlled.js

@@ -0,0 +1,37 @@
+import React, { Component } from 'react'
+import { Dropdown, Grid, Segment } from 'semantic-ui-react'
+
+const options = [
+  { key: 1, text: 'One', value: 1 },
+  { key: 2, text: 'Two', value: 2 },
+  { key: 3, text: 'Three', value: 3 },
+]
+
+export default class DropdownExampleControlled extends Component {
+  state = {}
+
+  handleChange = (e, { value }) => this.setState({ value })
+
+  render() {
+    const { value } = this.state
+
+    return (
+      <Grid columns={2}>
+        <Grid.Column>
+          <Dropdown
+            onChange={this.handleChange}
+            options={options}
+            placeholder='Choose an option'
+            selection
+            value={value}
+          />
+        </Grid.Column>
+        <Grid.Column>
+          <Segment secondary>
+            <pre>Current value: {value}</pre>
+          </Segment>
+        </Grid.Column>
+      </Grid>
+    )
+  }
+}

docs/app/Examples/modules/Dropdown/Usage/index.js

@@ -30,7 +30,11 @@ const DropdownUsageExamples = () => (
       description='A dropdown can choose whether or not to change the value when navigating the menu with arrow keys.'
       examplePath='modules/Dropdown/Usage/DropdownExampleSelectOnNavigation'
     />
-
+    <ComponentExample
+      title='Controlled'
+      description='A dropdown can behave like an controlled input.'
+      examplePath='modules/Dropdown/Usage/DropdownExampleControlled'
+    />
     <ComponentExample
       title='Uncontrolled'
       description='A dropdown can behave like an uncontrolled input.'