rrr

tables

src/components/fetchUtils/FetchUtils.jsx

@@ -0,0 +1,68 @@
+/* eslint-disable no-unused-vars */
+import axios from "axios"
+import { useState } from "react"
+import './style.css'
+
+
+
+const FetchUtils = () => {
+    // default value of data is object or array/nums/string
+    // const [rata, setRata] = useState([])
+    const [user, setUser] = useState([])
+    // single axios feetching
+
+    // useEffect(
+    //     () => {
+    //         async function getData() {
+    //             const response = await axios.get('http://localhost:5000/weatherforecast')
+    //             console.log(response.data)
+    //             setRata(response.data)
+    //         }
+    //         getData()
+    //     }, []
+    // )
+    // useEffect(
+    //     () => {
+            async function getData() {
+                const response = await axios.get('https://jsonplaceholder.typicode.com/users')
+                console.log(response.data)
+                setUser(response.data)
+            }
+    //         getData()
+    //     }, []
+    // )
+    // Loop of axios fetching \\
+
+    // async function getData() {
+    //     const response = await axios.get('http://localhost:5000/weatherforecast')
+    //     console.log(response.data)
+    //     setRata(response.data)
+    // }
+    // getData()
+    const removeList = () => {
+        setUser([])
+    }
+    return (
+        <>
+          <button onClick={getData}>Click to Get Data</button>
+          <button onClick={removeList}>Click to Remove Data Listing</button>
+          {/* Mapping of data */}
+          <div>
+            {Array.isArray(user) ? (
+              <ul>
+                {user.map((item) => (
+                  <ol key={item.id}>
+                    <li>{item.name}</li>
+                    <li>{item.username}</li>
+                    <li>{item.email}</li>
+                  </ol>
+                ))}
+              </ul>
+            ) : (
+              <p>Bad data type from server!</p>
+            )}
+          </div>
+        </>
+      );
+}
+export default FetchUtils;

src/components/fetchUtils/style.css

@@ -0,0 +1,18 @@
+ul {
+    display: flex;
+    /* justify-content: center; */
+    flex-direction: column;
+    list-style: none;
+}
+
+ol {
+    display: flex;
+    /* justify-content: center; */
+    /* align-items: center; */
+    /* text-align: left; */
+    list-style: none;
+}
+
+li {
+    margin-right: 30px;
+}