From 4b36f24bf95bfa76b7f8c7fb8599754d4b916ff5 Mon Sep 17 00:00:00 2001
From: SaishJ <saishjagtap0003@gmail.com>
Date: Fri, 2 Sep 2022 17:43:27 +0530
Subject: [PATCH] :card_file_box: Form Handling

Form Handling
---
 src/App.js             |  6 ++--
 src/components/Form.js | 74 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 78 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Form.js

diff --git a/src/App.js b/src/App.js
index 6dc3265..1671150 100644
--- a/src/App.js
+++ b/src/App.js
@@ -13,12 +13,14 @@ import PersonList from "./components/PersonList";
 import NameList from "./components/NameList";
 import StyleSheet from "./components/StyleSheet";
 import Inline from "./components/Inline";
+import Form from "./components/Form";
 
 function App() {
   return (
     <div className="App">
-      <StyleSheet primary={true} />
-      <Inline />
+      <Form />
+      {/* <StyleSheet primary={true} /> */}
+      {/* <Inline /> */}
       {/* <NameList /> */}
       {/* <PersonList /> */}
       {/* <UserGreeting /> */}
diff --git a/src/components/Form.js b/src/components/Form.js
new file mode 100644
index 0000000..606fd81
--- /dev/null
+++ b/src/components/Form.js
@@ -0,0 +1,74 @@
+import React, { Component } from "react";
+
+class Form extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      username: "",
+      comments: "",
+      topic: "React",
+    };
+  }
+
+  handleUsername = (event) => {
+    this.setState({
+      username: event.target.value,
+    });
+  };
+
+  handleComment = (event) => {
+    this.setState({
+      comments: event.target.value,
+    });
+  };
+
+  handleTopic = (event) => {
+    this.setState({
+      topic: event.target.value,
+    });
+  };
+
+  handleSubmit = (event) => {
+    alert(
+      `Username: ${this.state.username}, Comment: ${this.state.comments}, Topic: ${this.state.topic}`
+    );
+    event.preventDefault();
+  };
+
+  render() {
+    return (
+      <div>
+        <form onSubmit={this.handleSubmit}>
+          <div>
+            <label>Username</label>
+            <input
+              type="text"
+              value={this.state.username}
+              onChange={this.handleUsername}
+            />
+          </div>
+          <div>
+            <label>Comment</label>
+            <textarea
+              type="text"
+              value={this.state.comments}
+              onChange={this.handleComment}
+            ></textarea>
+          </div>
+          <div>
+            <label>Topic</label>
+            <select value={this.state.topic} onChange={this.handleTopic}>
+              <option value="react">React</option>
+              <option value="angular">Angular</option>
+              <option value="vue">Vue</option>
+            </select>
+          </div>
+          <button type="submit">Submit</button>
+        </form>
+      </div>
+    );
+  }
+}
+
+export default Form;