load data

This commit is contained in:
njord 2023-05-29 21:04:28 +02:00
parent f42574f0a4
commit 3e1e4cfd9e
4 changed files with 59 additions and 2 deletions

View File

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

19
src/Posts.js Normal file
View File

@ -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>
</>
);
};

12
src/Products.js Normal file
View File

@ -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>;
};

19
src/Users.js Normal file
View File

@ -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>
</>
);
};