From 63caa9342da18a9ee98fc22111a2ca58b15c021c Mon Sep 17 00:00:00 2001
From: "Begerad, Stefan" <dialog@swingbe.de>
Date: Wed, 22 Jun 2022 14:03:13 +0200
Subject: [PATCH] feat(select): extend drop-down component

---
 select/src/components/drop-down-select.jsx | 21 ++++++++++++++-------
 select/src/pages/home.jsx                  | 17 +++++++++++++++--
 2 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/select/src/components/drop-down-select.jsx b/select/src/components/drop-down-select.jsx
index 91e49de..56b5b22 100644
--- a/select/src/components/drop-down-select.jsx
+++ b/select/src/components/drop-down-select.jsx
@@ -1,21 +1,27 @@
 import React from 'react'
 import PropTypes from 'prop-types';
 
+/*controlled component: input form value controlled by React*/
 const DropDownSelect = (props) => {
-    if(props.options){
-	console.log('options len: '+props.options.length);
+    /*destructuring*/
+    const {options,name,onChange}=props;
+    if(options){
+	console.log('options len: '+options.length);
 	return(
 	<div>
-	    <strong>{props.name}</strong>:
+	    <strong>{name}</strong>:
 	    <select
-		name="{props.name}"
-		onChange={props.onChange}
+		name={name}
+		id={name}
+		className={name}
+		onChange={onChange}
+		autoFocus
 	    >
 		<option defaultValue
 		>
-		    Select {props.name}
+		    Select {name}
 		</option>
-		{props.options.map((item, index) => (
+		{options.map((item, index) => (
 		    <option key={index} value={item.id}>
 			{item.name}
 		    </option>
@@ -36,5 +42,6 @@ export default DropDownSelect
 
 DropDownSelect.propTypes = {
     name: PropTypes.string,
+    onChange: PropTypes.func,
     options: PropTypes.array,
 };
diff --git a/select/src/pages/home.jsx b/select/src/pages/home.jsx
index a290f52..f0aeb48 100644
--- a/select/src/pages/home.jsx
+++ b/select/src/pages/home.jsx
@@ -18,7 +18,16 @@ const Home = () => {
             console.log('err.message: ' + err.message);
         }
     };
-
+    const handleChange = (e) => {
+	console.log('prev chosenValue: '+chosenValue);
+        console.log('e.target.id: '+e.target.id);
+        console.log('e.target.type: '+e.target.type);
+        console.log('e.target.className: '+e.target.className);
+        console.log('e.target.tagName: '+e.target.tagName);
+        console.log('e.target.name: '+e.target.name);
+        console.log('e.target.value: '+e.target.value);
+	setChosenValue(e.target.value);
+    };
     /*this hook is run after a DOM update. Changing state migh result in an infinite loop*/
     /*hook need to be placed in body of the function component in which it is used*/
     useEffect(() => {
@@ -30,7 +39,11 @@ const Home = () => {
 
     return (
 	<>
-	    <DropDownSelect name="University" options={list}/>
+	    <DropDownSelect
+		name="Name"
+		onChange={handleChange}
+		options={list}
+	    />
 	</>
     );
 }