Home work React done

.idea/workspace.xml

@@ -2,13 +2,8 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="c45bf7d2-992f-400a-8194-6f236ee5f805" name="Changes" comment="">
-      <change afterPath="$PROJECT_DIR$/Tesst/css.css" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/Tesst/index.html" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/Tesst/js.js" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/test/index.html" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/test/js.js" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/Js_18_oop/js.js" beforeDir="false" afterPath="$PROJECT_DIR$/Js_18_oop/js.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/HW_react_1/my-app/src/App.js" beforeDir="false" afterPath="$PROJECT_DIR$/HW_react_1/my-app/src/App.js" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -118,7 +113,7 @@
       <workItem from="1674856401303" duration="1332000" />
       <workItem from="1674903743476" duration="36957000" />
       <workItem from="1675282416423" duration="1017000" />
-      <workItem from="1675342216018" duration="8957000" />
+      <workItem from="1675342216018" duration="11779000" />
     </task>
     <servers />
   </component>

HW_react_1/my-app/src/App.js

@@ -50,30 +50,41 @@ const BlockOfTextWithHeader = ({children,title='No Title'}) =>
 const LoginForm = ({onLogin}) => {
     //тут надо два состояния - для логина и для пароля;
     //кнопка логина должна быть disabled если одно из полей пустое
-    //по клику на кнопку запустить onLogin и передать туда 
-    //текущее состояние login и password
+    //по клику на кнопку запустить onLogin и передать туда текущее состояние login и password
+    const [login, setLogin] = useState('')
+    const [password, setPassword] = useState('')
+
+    const lenghtCheck = !(login.length >= 4 && password.length >= 4)
     return (
-        <h1>тут вместо h1 должна быть верстка: два инпута и кнопка login</h1>
+        <div>
+            <input
+                value = {login}
+                onChange={e => setLogin(e.target.value)}
+                type="text"
+                placeholder='Login'/>
+            <input
+                value = {password}
+                onChange={e => setPassword(e.target.value)}
+                type="password"
+                placeholder='Password'
+            />
+            <button
+                onClick={() => onLogin({login, password})}
+                disabled = {lenghtCheck}
+                type="submit"
+            > Login... </button>
+        </div>
     )
 }
-    
 
 function App() {
-  return (
-      <div className="App">
-          <header className="App-header" 
-              style={{cssText: "border-radius: 50px; color: #FF0FF; font-size: 2em"}}>
-
-              <LoginForm onLogin={(l,p) => console.log('LOGIN', l,p)} />
-              {/*<Input />*/}
-              {/*<Counter />*/}
-              {/*<Counter />*/}
-              {/*{Math.random() > 0.5 ? <h1>ЗАГОЛОВОК</h1>: <code>КОД</code>}*/}
-              {/*{arr.map(text => <div>{text}</div>)}*/}
-              {/*//{data.map(({children, title}) => <BlockOfTextWithHeader children={children} title={title} />)}*/}
-          </header>
-      </div>
-  );
+    return (
+        <div className="App">
+            <LoginForm onLogin={({login, password}) => console.log('ЛОГИН И ПАРОЛЬ', login, password)}/>
+        </div>
+    );
 }
 
+
+
 export default App;