feat(react-bootstrap): adjust form

react-bootstrap/app/components/form.jsx

@@ -1,24 +1,44 @@
 import React, {useState} from 'react';
 import Button from 'react-bootstrap/Button';
 import Form from 'react-bootstrap/Form';
-
 export default function FForm() {
+    const [value,setValue]=useState('Enter text');
+
+    //ATTENTION: omit infinite loop by change handling function
+    //https://stackoverflow.com/questions/32923255/react-checkbox-doesnt-toggle
+    const [valueCheck,setValueCheck]=useState(true);
+    const [valueCheckNext,setValueCheckNext]=useState(false);
+    console.log('FForm() valueCheck:'+valueCheck);
+    console.log('FForm() valueCheckNext:'+valueCheckNext);
+    const [valueEmail,setValueEmail]=useState('Enter email');
     const handleFormSubmit=e=>{
+	console.log('handleFormSubmit() started...');
 	e.preventDefault();
-	console.log('value:'+value);
+	console.log('handleFormSubmit() value:'+value);
+	console.log('handleFormSubmit() valueCheck:'+valueCheck);
+	console.log('handleFormSubmit() valueCheckNext:'+valueCheckNext);
+	console.log('handleFormSubmit() valueEmail:'+valueEmail);
 	//TODO Set value!?
 	console.log('event:'+event);
+	console.log('handleFormSubmit() done.');
     };
-    const [value,setValue]=useState('value');
     const handleValue=(event, property)=>{
+	console.log('handleValue() started...');
 	const target=event.target;
-	console.log('target:'+target);
+	console.log('handleValue() target:'+target);
+	console.log('handleValue() target.value:'+target.value);
 	event.preventDefault();
 	console.log('property:'+property);
 	if(property==='value'){
-	    setValue(value);
-	}	
-    }
+	    console.log('property value detected!');
+	}
+	setValue(target.value);
+	console.log('handleValue() done.');
+    };
+    const handleValueEmail=(event)=>{
+	event.preventDefault()
+	setValueEmail((valueEmail)=>event.target.value);
+    };
   return (
       <Form
 	  onSubmit={handleFormSubmit}
@@ -27,7 +47,6 @@ export default function FForm() {
         <Form.Label>Text</Form.Label>
           <Form.Control
 	      type="text"
-	      placeholder="Enter text"
 	      value={value}
 	      onChange={handleValue}
 	  />
@@ -38,7 +57,11 @@ export default function FForm() {
 
       <Form.Group className="mb-3" controlId="formBasicEmail">
         <Form.Label>Email address</Form.Label>
-        <Form.Control type="email" placeholder="Enter email" />
+          <Form.Control
+	      type="email"
+	      value={valueEmail}
+	      onChange={handleValueEmail}
+	  />
         <Form.Text className="text-muted">
           We'll never share your email with anyone else.
         </Form.Text>
@@ -50,11 +73,26 @@ export default function FForm() {
       </Form.Group>
 
 	  <Form.Group className="mb-3" controlId="formBasicCheckbox">
-        <Form.Check type="checkbox" label="Check me out" />
+	      <Form.Check
+		  label="Check me out"
+		  checked={valueCheck}
+		  name="valueCheck"
+		  id="valueCheck"
+		  onChange={(event) => setValueCheck(event.currentTarget.checked)}
+		  type="checkbox"
+	      />
+
       </Form.Group>
 
 	  <Form.Group className="mb-3" controlId="formBasicCheckboxNext">
-        <Form.Check type="checkbox" label="Check me out next" />
+	      <Form.Check
+		  label="Check me out next"
+		  checked={valueCheckNext}
+		  name="valueCheckNext"
+		  id="valueCheckNext"
+		  onChange={(event) => setValueCheckNext(event.currentTarget.checked)}
+		  type="checkbox"
+	      />
       </Form.Group>
 
 	  <Button variant="secondary" type="submit">

react-bootstrap/package-lock.json

@@ -9,10 +9,10 @@
             "version": "0.1.0",
             "license": "GPL-3.0-or-later",
             "dependencies": {
-                "bootstrap": "^5.2.3",
+                "bootstrap": "5.2.3",
                 "prop-types": "15.8.1",
                 "react": "18.2.0",
-                "react-bootstrap": "^2.7.2",
+                "react-bootstrap": "2.7.2",
                 "react-dom": "18.2.0"
             },
             "devDependencies": {