瀏覽代碼

spoiler component done

miskson 2 年之前
父節點
當前提交
407fc2c1bc
共有 1 個文件被更改,包括 5 次插入10 次删除
  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>
             лорем ипсум траливали и тп.