load data

src/App.js

@@ -10,6 +10,10 @@ import { Animal } from "./Animal";
 import { useState } from "react";
 //import { Button } from "./Button";
 //import { Button, ButtonGroup } from "@chakra-ui/react";
+import React, { useEffect } from "react";
+import { Products } from "./Products";
+import { Users } from "./Users";
+import { Posts } from "./Posts";
 
 function App() {
   //const animal = [];
@@ -36,7 +40,7 @@ function App() {
     //setAnimal(["Lev", "Lachtan", "Varan", "Slon"]);
     if (newAnimal != "") {
       setAnimal([...animal, newAnimal]);
-      console.log("pridal jsi...");
+      console.log("pridal jsi " + newAnimal);
       setNewAnimal("");
     } else console.log("prazdne pole...");
   };
@@ -49,7 +53,7 @@ function App() {
   const handleDeleteAnimal = () => {
     //emptyZoo = true;
     setAnimal([]);
-    console.log("smazal jsi...");
+    console.log("smazal jsi vse");
   };
 
   return (
@@ -71,6 +75,9 @@ function App() {
       {/* <ChakraProvider>
         <Button colorScheme="teal">Chakra button</Button>
       </ChakraProvider> */}
+      <Products></Products>
+      <Users></Users>
+      <Posts></Posts>
     </>
   );
 }

src/Posts.js

@@ -0,0 +1,19 @@
+import React, { useEffect, useState } from "react";
+
+export const Posts = () => {
+  const [posts, setPosts] = useState([]);
+  useEffect(() => {
+    fetch("https://jsonplaceholder.typicode.com/posts")
+      .then((response) => response.json())
+      .then((json) => setPosts(json));
+  }, []);
+  return (
+    <>
+      <ul>
+        {posts.map((post) => (
+          <li key={post.id}>{post.title}</li>
+        ))}
+      </ul>
+    </>
+  );
+};

src/Products.js

@@ -0,0 +1,12 @@
+import React, { useEffect } from "react";
+import { useState } from "react";
+
+export const Products = () => {
+  const [products, setProducts] = useState([]);
+  useEffect(() => {
+    document.title = "Products";
+    console.log("fetching products");
+    setProducts(["test", "test2"]);
+  }, []);
+  return <div>{products}</div>;
+};

src/Users.js

@@ -0,0 +1,19 @@
+import React, { useEffect, useState } from "react";
+
+export const Users = () => {
+  const [users, setUsers] = useState([]);
+  useEffect(() => {
+    fetch("https://jsonplaceholder.typicode.com/users")
+      .then((response) => response.json())
+      .then((json) => setUsers(json));
+  }, []);
+  return (
+    <>
+      <ul>
+        {users.map((user) => (
+          <li key={user.id}>{user.name}</li>
+        ))}
+      </ul>
+    </>
+  );
+};