🌐 HTTP Get Request

HTTP Get Request

README.md

@@ -241,4 +241,4 @@ export default UpdatedComponent;
 
 ### [Render Peops](https://github.com/SaishJ/React-JS-Beginner-to-Advanced/commit/d60d9bec7747e75247a97d22406520cbac48fa0a)
 
-### [Context]()
+### [Context](https://github.com/SaishJ/React-JS-Beginner-to-Advanced/commit/c925fec6db26889ac391d1c8cd072b67e40c2b49)

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^0.27.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

src/App.js

@@ -31,13 +31,15 @@ import ClickCounterTwo from "./components/ClickCounterTwo";
 import HoverCounterTwo from "./components/HoverCounterTwo";
 import { UserProvider } from "./components/useContext";
 import ComponentA from "./components/ComponentA";
+import PostList from "./components/PostList";
 
 function App() {
   return (
     <div className="App">
-      <UserProvider value="Saish">
+      <PostList />
+      {/* <UserProvider value="Saish">
         <ComponentA />
-      </UserProvider>
+      </UserProvider> */}
       {/* <Increment
         render={(count, incrementCount) => (
           <ClickCounterTwo count={count} incrementCount={incrementCount} />

src/components/PostList.js

@@ -0,0 +1,42 @@
+import React, { Component } from "react";
+import axios from "axios";
+
+class PostList extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      posts: [],
+      errMsg: "",
+    };
+  }
+
+  componentDidMount() {
+    axios
+      .get("https://jsonplaceholder.typicode.com/posts")
+      .then((response) => {
+        console.log(response);
+        this.setState({ posts: response.data });
+      })
+      .catch((error) => {
+        console.log(error);
+        this.setState({ errMsg: "Error retrieving data..." });
+      });
+  }
+
+  render() {
+    const { posts, errMsg } = this.state;
+    return (
+      <div>
+        <h1>Post List</h1>
+        {posts.length ? (
+          posts.map((post) => <h3 key={post.id}>{post.title}</h3>)
+        ) : (
+          <h3>{errMsg}</h3>
+        )}
+      </div>
+    );
+  }
+}
+
+export default PostList;