kurz_react/src/App.js
2023-05-29 21:10:17 +02:00

86 lines
2.3 KiB
JavaScript

import logo from "./logo.svg";
import "./App.css";
// import `ChakraProvider` component
//import { ChakraProvider } from "@chakra-ui/react";
import Header from "./Header";
import Content from "./Content";
import Footer from "./Footer";
import { Menu } from "./Menu";
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 = [];
//const animal = ["Lev", "Lachtan", "Varan", "Slon"];
const [animal, setAnimal] = useState(["Lev", "Lachtan", "Varan", "Slon"]);
const [menu, setMenu] = useState(["Uvod", "O nas", "Kontakt"]);
const [newAnimal, setNewAnimal] = useState("");
const handleAddMenu = () => {
console.log("pridal jsi menu");
setMenu(["Uvod", "O nas", "Kontakt"]);
};
const handleDeleteMenu = () => {
console.log("smazal jsi menu");
setMenu([]);
};
const handleAddAnimal = () => {
//const arr = ['zirafa', 'mroz'];
//setAnimal(current => [...current, ...arr]);
//emptyZoo = false;
//setAnimal(["Lev", "Lachtan", "Varan", "Slon"]);
if (newAnimal !== "") {
setAnimal([...animal, newAnimal]);
console.log("pridal jsi " + newAnimal);
setNewAnimal("");
} else console.log("prazdne pole...");
};
const handleOnChange = (event) => {
console.log(event.target.value);
setNewAnimal([event.target.value]);
};
const handleDeleteAnimal = () => {
//emptyZoo = true;
setAnimal([]);
console.log("smazal jsi vse");
};
return (
<>
{/* <Menu
menu={menu}
handleDeleteMenu={handleDeleteMenu}
handleAddMenu={handleAddMenu}
nadpis="Menu"
/> */}
<Animal
animal={animal}
inputValue={newAnimal}
handleAddAnimal={handleAddAnimal}
handleDeleteAnimal={handleDeleteAnimal}
handleOnChange={handleOnChange}
nadpis="Super ZOO"
/>
{/* <ChakraProvider>
<Button colorScheme="teal">Chakra button</Button>
</ChakraProvider> */}
<Products></Products>
<Users></Users>
<Posts></Posts>
</>
);
}
export default App;