Spoiler+

JSX-homework/src/App.js

@@ -1,87 +1,7 @@
 import React, { useEffect, useState } from 'react';
-import defaultLogo from './logo.svg';
 import './App.scss';
 
-const Logo = ({logo=defaultLogo}) =>
-<img  className="Logo" src={logo} alt='logo'/>
 
-const Header = ({children}) =>
-<header>
-    <Logo />
-    {children}
-</header>
-
-let defaultCategories = [{
-  "name": "     Smartphones",
-  "_id": "5dc458985df9d670df48cc47"
-},
-{
-  "name": "Холодильники",
-  "_id": "5dc4b2553f23b553bf3540fc"
-},
-{
-  "name": "Стиральные машины",
-  "_id": "5dc4b2553f23b553bf3540fd"
-},
-{
-  "name": "Стирально-сушильные машины",
-  "_id": "5dc4b2553f23b553bf3540fe"
-},
-{
-  "name": "Стиральные машины",
-  "_id": "5dc4b2553f23b553bf3540ff"
-},
-{
-  "name": "Духовые шкафы",
-  "_id": "5dc4b2553f23b553bf354100"
-},
-{
-  "name": "Крупная бытовая техника",
-  "_id": "5dc4b2553f23b553bf354101"
-},
-{
-  "name": " Макароны",
-  "_id": "5dcac1b56d09c45440d14cf8"
-},
-{
-  "name": "Drinks",
-  "_id": "5dcac6cf6d09c45440d14cfd"
-}]
-const CategoryItem = ({category:{_id,name}= {}}) =>
-<li className='CategoryItem'>
-  {name}
-</li>
-
-const RootCategories = ({categories = defaultCategories}) =>
-<ul className='RootCategories'>
-      {categories.map(category => <CategoryItem category={category}/>)}
-</ul>
-
-
-const Aside = ({}) =>
-<aside>
-  <RootCategories/>
-</aside>
-const Content = ({children}) =>
-<section className='Content'>
-    {children}
-</section>
-
-const Main = ({children}) =>
-<section>
-  <Aside/>
-  <Content>
-    <Logo/>
-    {children}
-  </Content>
-  {children}
-</section>
-
-const Footer = ({children}) =>
-<footer>
-  <Logo/>
-  {children}
-</footer>
 
 const Input = () => {
   const [text, setText] = useState('text');
@@ -116,23 +36,23 @@ const Counter = ({ms=1000}) => {
     <div>{counter}</div>
   )
 }
-const Spoiler = ({children}) => {
-  const [open, setOpen] = useState(true)
+const Spoiler = ({header="+",children, opened=true}) => {
+  const [open, setOpen] = useState(opened)
   return (
     <div>
-        <button onClick={()=>setOpen(!open)}>Toggle</button>
+        <div onClick={()=>setOpen(!open)}>{header}</div>
         {open && children}
     </div>
   )
 }
 
 const Counters = () => {
-  const [cntrs, setCntrs] = useState([1,2,3])
+  const [cntrs, setCntrs] = useState([])
   const [ms, setMs] = useState(1000)
   return (
     <div>
-      <button onClick={() => setCntrs(ms+100)}>+</button>
-      <button onClick={() => setCntrs(ms-100)}>-</button>
+      <button onClick={() => setMs(ms+100)}>+</button>
+      <button onClick={() => setMs(ms-100)}>-</button>
       {cntrs.map(() => <Counter/>)}
       <button onClick={() => setCntrs([...cntrs, cntrs.length])}>Add</button>
     </div>
@@ -145,10 +65,11 @@ const Counters = () => {
 function App () {
   return(
     <div className='App'>
-      <Input/>
-      <LoginForm onLogin={(login, password) => console.log(login,password)}/>
-      <Spoiler>
-      <Counter/>
+      {/* <Input/> */}
+      {/* <LoginForm onLogin={(login, password) => console.log(login,password)}/> */}
+      <Spoiler header={<h1>Hello</h1>} opened={false}>
+        <h1>Hello</h1>
+        <p>blabla</p>
       </Spoiler>
     </div>
   );

redax-shop

@@ -0,0 +1 @@
+Subproject commit 3111e65531beef0682eaa96c693b39b68095a3eb