⬆️ HTTP Post Request

HTTP Post Request

README.md

@@ -242,3 +242,5 @@ export default UpdatedComponent;
 ### [Render Peops](https://github.com/SaishJ/React-JS-Beginner-to-Advanced/commit/d60d9bec7747e75247a97d22406520cbac48fa0a)
 
 ### [Context](https://github.com/SaishJ/React-JS-Beginner-to-Advanced/commit/c925fec6db26889ac391d1c8cd072b67e40c2b49)
+
+### [HTTP Get Request](https://github.com/SaishJ/React-JS-Beginner-to-Advanced/commit/c33bcb13cc37673c610879674e3a1190e574963e)

src/App.js

@@ -32,11 +32,13 @@ import HoverCounterTwo from "./components/HoverCounterTwo";
 import { UserProvider } from "./components/useContext";
 import ComponentA from "./components/ComponentA";
 import PostList from "./components/PostList";
+import PostForm from "./components/PostForm";
 
 function App() {
   return (
     <div className="App">
-      <PostList />
+      <PostForm />
+      {/* <PostList /> */}
       {/* <UserProvider value="Saish">
         <ComponentA />
       </UserProvider> */}

src/components/PostForm.js

@@ -0,0 +1,72 @@
+import React, { Component } from "react";
+import axios from "axios";
+
+export class PostForm extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      userId: "",
+      title: "",
+      body: "",
+    };
+  }
+
+  changeHandler = (e) => {
+    this.setState({ [e.target.name]: e.target.value });
+  };
+
+  handleSubmit = (e) => {
+    e.preventDefault();
+    console.log(this.state);
+    axios
+      .post("https://jsonplaceholder.typicode.com/posts", this.state)
+      .then((response) => {
+        console.log(response);
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  };
+
+  render() {
+    const { userId, title, body } = this.state;
+    return (
+      <div>
+        <h1>User Form</h1>
+        <form onSubmit={this.handleSubmit}>
+          <div>
+            <input
+              type="text"
+              placeholder="Id"
+              name="userId"
+              value={userId}
+              onChange={this.changeHandler}
+            />
+          </div>
+          <div>
+            <input
+              type="text"
+              placeholder="Title"
+              name="title"
+              value={title}
+              onChange={this.changeHandler}
+            />
+          </div>
+          <div>
+            <input
+              type="text"
+              placeholder="Comment"
+              name="body"
+              value={body}
+              onChange={this.changeHandler}
+            />
+          </div>
+          <button type="submit">Submit</button>
+        </form>
+      </div>
+    );
+  }
+}
+
+export default PostForm;