RangeInput+

JSX-homework/src/App.js

@@ -59,7 +59,28 @@ const Counters = () => {
   )
 }
 
-
+const RangeInput = ({min,max}) => {
+  const [value, SetValue] = useState(0);
+  let color = "white";
+  console.log(value);
+  /* useEffect(() => {
+    if(value < min || value > max){
+        color = "red";
+        console.log(color);
+    } else {
+      color = '';
+    }
+  }, [value]) */
+  if(value < min || value > max) {
+    color = "red"
+    console.log(color);
+  } else {
+    color = "";
+  }
+  return (
+    <input onChange={e => SetValue(e.target.value.length)} style={{backgroundColor:color}}/>
+  )
+}
 
 
 function App () {
@@ -71,6 +92,7 @@ function App () {
         <h1>Hello</h1>
         <p>blabla</p>
       </Spoiler>
+      <RangeInput min={2} max={10}/>
     </div>
   );
 }