From 91db4c3e8b9a504da72e7cb23c6d72fb7dc9b487 Mon Sep 17 00:00:00 2001
From: "Begerad, Stefan" <dialog@swingbe.de>
Date: Wed, 8 Jun 2022 10:21:23 +0200
Subject: [PATCH] feat(form): add form with multiple inputs

---
 form/README.md                      |  1 +
 form/package.json                   |  4 +--
 form/src/components/form-values.jsx | 33 +++++++++++++++++++
 form/src/components/login.jsx       | 33 +++++++++++++++++++
 form/src/pages/home.jsx             | 49 +++++++++++++++++++++++++++--
 5 files changed, 115 insertions(+), 5 deletions(-)
 create mode 100644 form/src/components/form-values.jsx
 create mode 100644 form/src/components/login.jsx

diff --git a/form/README.md b/form/README.md
index e8d6ac1..a16dfd5 100644
--- a/form/README.md
+++ b/form/README.md
@@ -12,3 +12,4 @@ present form examples based on grassroot project
 # Links
 
 * [React setup with webpack for beginners](https://dev.to/deepanjangh/react-setup-with-webpack-for-beginners-2a8k)
+* [How to handle multiple form inputs in reactjs](https://medium.com/zestgeek/how-to-handle-multiple-form-inputs-in-reactjs-2f68e3cf3cf8)
\ No newline at end of file
diff --git a/form/package.json b/form/package.json
index 2ccd56c..4879393 100644
--- a/form/package.json
+++ b/form/package.json
@@ -1,7 +1,7 @@
 {
     "private": true,
-    "name": "webpack-react",
-    "description": "example using webpack for react",
+    "name": "form",
+    "description": "form examples",
     "version": "0.0.1",
     "main": "index.js",
     "keywords": [
diff --git a/form/src/components/form-values.jsx b/form/src/components/form-values.jsx
new file mode 100644
index 0000000..fe3c231
--- /dev/null
+++ b/form/src/components/form-values.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/*controlled component: input form value controlled by React*/
+const FormValues = (props) => {
+    /*destructuring*/
+    const { value1, value1Name, value1Label, value2, value2Name, value2Label, onChange, onSubmit } = props;
+
+    return (
+        <>
+            <form onSubmit={onSubmit}>
+                <label>{value1Label}</label>
+                <input type="text" name={value1Name} value={value1} onChange={onChange} />
+		<br/>
+                <label>{value2Label}</label>
+                <input type="text" name={value2Name} value={value2} onChange={onChange} />
+		<input type="submit" value="Submit" />
+            </form>
+        </>
+    );
+};
+export default FormValues;
+
+FormValues.propTypes = {
+    value1: PropTypes.string,
+    value1Name: PropTypes.string,
+    value1Label: PropTypes.string,
+    value2: PropTypes.string,
+    value2Name: PropTypes.string,
+    value2Label: PropTypes.string,
+    onChange: PropTypes.func,
+    onSubmit: PropTypes.func
+};
diff --git a/form/src/components/login.jsx b/form/src/components/login.jsx
new file mode 100644
index 0000000..d5cb823
--- /dev/null
+++ b/form/src/components/login.jsx
@@ -0,0 +1,33 @@
+import React, { Component } from 'react'
+
+export default class Login extends Component {
+
+    state = {
+        email: '',
+        password: ''
+    };
+
+    handleOnChange = event => {
+        console.log('event.target.id: '+event.target.id);
+        console.log('event.target.type: '+event.target.type);
+        console.log('event.target.className: '+event.target.className);
+        console.log('event.target.tagName: '+event.target.tagName);
+        console.log('event.target.name: '+event.target.name);
+        console.log('event.target.value: '+event.target.value);
+	console.log('event.target: '+event.target);
+	this.setState({
+            [event.target.name]: event.target.value
+        })
+    }
+    render() {
+        return (
+            <form>
+                <label>Email</label>
+                <input type="text" name="email" onChange={this.handleOnChange} />
+		<br/>
+                <label>Password</label>
+                <input type="password" name="password" onChange={this.handleOnChange} />
+            </form>
+        );
+    }
+}
diff --git a/form/src/pages/home.jsx b/form/src/pages/home.jsx
index a275dd1..43b3fc0 100644
--- a/form/src/pages/home.jsx
+++ b/form/src/pages/home.jsx
@@ -1,19 +1,44 @@
 import React, { useState } from 'react';
 import Hello from '../components/hello';
 import Form from '../components/form-value';
+import FormValues from '../components/form-values';
+import Login from '../components/login';
 
 const Home = () => {
     //handle state
     const [value, setValue] = useState('');
+    const [value1, setValue1] = useState('');
+    const [value1Name, setValue1Name] = useState('aName');
+    const [value1Label, setValue1Label] = useState('aLable: ');
+    const [value2, setValue2] = useState('');
+    const [value2Name, setValue2Name] = useState('bName');
+    const [value2Label, setValue2Label] = useState('bLable: ');
 
     const handleSubmit = () => {
         event.preventDefault();
-	console.log('handleSubmit() todo');
+	console.log('value: '+value);
+	console.log('value1: '+value1);
+	console.log('value2: '+value2);
     };
 
     const handleChange = (e) => {
-	console.log('e.target.value: '+e.target.value);
-	setValue(e.target.value);
+        console.log('event.target.id: '+event.target.id);
+        console.log('event.target.type: '+event.target.type);
+        console.log('event.target.className: '+event.target.className);
+        console.log('event.target.tagName: '+event.target.tagName);
+        console.log('event.target.name: '+event.target.name);
+        console.log('event.target.value: '+event.target.value);
+	switch(event.target.name) {
+	case value1Name:
+	    setValue1(event.target.value);
+	    break;
+	case value2Name:
+	    setValue2(event.target.value);
+	    break;
+	case 'value':
+	    setValue(event.target.value);
+	    break;
+	};
     };
 
     const form = (
@@ -25,12 +50,30 @@ const Home = () => {
         />
     );
 
+    const formValues = (
+        <FormValues
+            value1={value1}
+            value1Name={value1Name}
+            value1Label={value1Label}
+            value2={value2}
+            value2Name={value2Name}
+            value2Label={value2Label}
+            onSubmit={handleSubmit}
+            onChange={handleChange}
+        />
+    );
+
     return (
 	<>
 	    <h1>Home</h1>
 	    <h2>(React.js Lambda Function Component)</h2>
 	    <Hello msg="Hello World!" />
+	    <h3>Form</h3>
             {form}
+	    <h3>Login</h3>
+	    <Login/>
+	    <h3>Form with values</h3>
+            {formValues}
 	</>
     );
 }