|
@@ -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>
|
|
|
лорем ипсум траливали и тп.
|