Merge branch 'select-component-cambios-propuestos' into develop

app/src/App.tsx

@@ -1,9 +1,23 @@
-import React from "react";
+import React, { ChangeEvent } from "react";
+import Select from "./components/UI/forms/select";
 
 function App() {
+  let optionList: string[] | number[] = ["a", "b", "c", "d"];
+
   return (
     <div>
       <button className="btn btn-primary">hola</button>
+      <div style={{ maxWidth: "300px", margin: "auto" }}>
+        <Select
+          list={optionList}
+          onChange={(e: ChangeEvent<HTMLInputElement>) =>
+            console.log(e.target.value)
+          }
+          name="Comparación"
+          placeholder="Selección de comparación"
+          data-algo="algo"
+        />
+      </div>
     </div>
   );
 }

app/src/components/UI/forms/select.tsx

@@ -1,7 +1,26 @@
 import React, { FC } from "react";
 
-const Select: FC = () => {
-  return <select id="" name=""></select>;
+interface selectProps {
+  list: string[] | number[];
+  onChange: Function;
+  placeholder: string;
+  name: string;
+  [index: string]: any;
+}
+
+// En las props hago un "rest", que me da el resto del objeto que estoy desestructurando
+const Select: FC<selectProps> = ({ list, className, ...props }) => {
+  return (
+    <select {...(props as any)} className={`form-select ${className}`}>
+      {props.placeholder ? <option value="">{props.placeholder}</option> : null}
+
+      {list.map((item) => (
+        <option value={item} key={item}>
+          {item}
+        </option>
+      ))}
+    </select>
+  );
 };
 
 export default Select;

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "zuccardi-frontend",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {}
+}