HW<react02>done correct

react/02/myproject/src/App.js

@@ -115,29 +115,29 @@ const names = ["Вася", "Петя", "Коля"]
 
 const Name = ({ name }) =>
     <li>{name}</li>
-
 function App() {
     const [show, setShow] = useState(false)
     return (
         <div className="App"
             onClick={() => setShow(!show)}>
-           
+
             <Spoiler header={<h1>+ Card</h1>}>
                 {div}
             </Spoiler>
-
+            <Spoiler header={<h1>+ Spoiler</h1>}>
                 <Spoiler header={<h1>Заголовок</h1>} open>
                     Контент 1
-                    <p> <LoremIpsum/></p>
+                    <p> <LoremIpsum /></p>
                 </Spoiler>
                 <Spoiler>
                     <h2>Контент 2</h2>
-                    <p> <LoremIpsum/></p>
+                    <p> <LoremIpsum /></p>
                 </Spoiler>
+            </Spoiler>
             {/*/////////////////////////////////////////*/}
             <RangeInput min={2} max={10} />
             <LoginForm />
-            <PasswordConfirm/>
+            <PasswordConfirm />
 
 
             {/*
@@ -149,15 +149,33 @@ function App() {
         </div>
     );
 }
+
+const findIdInParents = function (child, id) {
+    let node = child;
+    while (node) {
+        if (node.id === id ) {
+            return true;
+        }
+        node = node.parentNode;
+    }
+    return false;
+};
+
 ///////////////////////////////////spoiler//////////////////
 const Spoiler = ({ header = "+", open, children }) => {
     const [isOpen, setIsOpen] = useState('');
     if (isOpen !== '') {
         open = isOpen;
     }
-    return <div onClick={() => setIsOpen(!open)}>{header}{open && children}</div>
+    let id = `Spoiler_${Math.random()*1000000}`;
+    header = <div id={id}>{header}</div>
+    return <div onClick={e => { 
+        if (findIdInParents(e.target, id)){
+            setIsOpen(!open);
+        }
+        //e.stopPropagation(); 
+    }}>{header}{open && children}</div>
 }
-
 ////////////////////////////////////////////////////////////
 const RangeInput = ({ min, max }) => {
 
@@ -192,13 +210,13 @@ const LoginForm = ({ onLogin }) => {
 }
 function hasNumber(str) {
     return /\d/.test(str);
-  }
+}
 const PasswordConfirm = ({ onEqual }) => {
     const [password1, setPassword1] = useState('');
     const [password2, setPassword2] = useState('');
     let minLength = 3;
     const isButtonActive = (password1?.length > minLength && password2?.length > minLength &&
-        password1===password2 && hasNumber(password1));
+        password1 === password2 && hasNumber(password1));
     return (
         <div>
             <input placeholder='Password' value={password1}