From 6d3a3e2634c4a5464114596a737cbd1503500873 Mon Sep 17 00:00:00 2001
From: Manish Choudhary <47037694+mxnxsh@users.noreply.github.com>
Date: Wed, 7 Oct 2020 11:30:27 +0530
Subject: [PATCH] Update forms.md

---
 content/docs/forms.md | 60 +++++++++++++++++++------------------------
 1 file changed, 26 insertions(+), 34 deletions(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index 3d4292c8979..3db59632785 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -135,44 +135,36 @@ In HTML, `<select>` creates a drop-down list. For example, this HTML creates a d
 Note that the Coconut option is initially selected, because of the `selected` attribute. React, instead of using this `selected` attribute, uses a `value` attribute on the root `select` tag. This is more convenient in a controlled component because you only need to update it in one place. For example:
 
 ```javascript{4,10-12,24}
-class FlavorForm extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {value: 'coconut'};
-
-    this.handleChange = this.handleChange.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
-  }
-
-  handleChange(event) {
-    this.setState({value: event.target.value});
-  }
-
-  handleSubmit(event) {
-    alert('Your favorite flavor is: ' + this.state.value);
+function FlavourForm() {
+  const [flavour, setFlavour] = useState("");
+  const handleSubmit = (event) => {
+    alert(`Your favorite flavor is ${flavour}`);
     event.preventDefault();
-  }
-
-  render() {
-    return (
-      <form onSubmit={this.handleSubmit}>
-        <label>
-          Pick your favorite flavor:
-          <select value={this.state.value} onChange={this.handleChange}>
-            <option value="grapefruit">Grapefruit</option>
-            <option value="lime">Lime</option>
-            <option value="coconut">Coconut</option>
-            <option value="mango">Mango</option>
-          </select>
-        </label>
-        <input type="submit" value="Submit" />
-      </form>
-    );
-  }
+  };
+  return (
+    <form onSubmit={handleSubmit}>
+      <label>
+        Pick your favorite flavor:
+        <select
+          value={flavour}
+          onChange={(event) => setFlavour(event.target.value)}
+        >
+          <option value="grapefruit">Grapefruit</option>
+          <option value="lime">Lime</option>
+          <option value="coconut">Coconut</option>
+          <option value="mango">Mango</option>
+        </select>
+      </label>
+      <input type="submit" value="Submit" />
+    </form>
+  );
 }
+const rootElement = document.getElementById("root");
+
+ReactDOM.render(<FlavourForm />, rootElement);
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/JbbEzX?editors=0010)
+[**Try it on CodeSandBox**](https://codesandbox.io/s/controlled-select-example-fls8j)
 
 Overall, this makes it so that `<input type="text">`, `<textarea>`, and `<select>` all work very similarly - they all accept a `value` attribute that you can use to implement a controlled component.