Ver código fonte

spoiler component done

miskson 2 anos atrás
pai
commit
407fc2c1bc
1 arquivos alterados com 5 adições e 10 exclusões
  1. 5 10
      hw19-react-jsx-homework/src/App.js

+ 5 - 10
hw19-react-jsx-homework/src/App.js

@@ -2,21 +2,16 @@ import logo from './logo.svg';
 import './App.css';
 import { useState } from 'react';
 
-const Spoiler = ({header="+", open=false, children}) => {
-  //напишите тут код
-  let [isVisible, setVisible] = useState()
-  let visibility = open? 'visible' : 'hidden'
-  console.log('open', visibility)
-  
+const Spoiler = ({header="+", open=true, children}) => {
+  let [isOpen=open, setOpen] = useState()
   return (
     <>
-      <header onClick={() => {open = !open; console.log('now',open)}}>{header}</header>
-      <div style={{visibility: visibility}}>
+      <header onClick={() => setOpen(!isOpen)}>{header}</header>
+      <div style={{visibility: isOpen? 'visible' : 'hidden'}}>
         {children}
       </div>
     </>
   )
-
 }
 
 
@@ -24,7 +19,7 @@ const Spoiler = ({header="+", open=false, children}) => {
 function App() {
   return (
     <div className="App">
-      <Spoiler header={<h1>Заголовок</h1>} open>
+      <Spoiler header={<h1>Заголовок(клацать сюда)</h1>} open>
         Контент 1
         <p>
             лорем ипсум траливали и тп.