Componente Select creado

app/src/App.tsx

@@ -1,9 +1,15 @@
 import React 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>
+      <Select className="form-select" list={optionList} placeholder='Selección de comparación'/>
     </div>
   );
 }

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

@@ -1,7 +1,29 @@
-import React, { FC } from "react";
+import React, { FC, useState } from "react";
 
-const Select: FC = () => {
-  return <select id="" name=""></select>;
+interface selecteProps {
+  list: string[] | number[];
+  placeholder: string;
+  className?: string;
+  id?: string;
+  name?: string;
+}
+
+const Select: FC<selecteProps> = ({ list, id, name, className, placeholder }) => {
+  const [selected, setSelected] = useState<string | number>(placeholder);
+
+  const onChangeSelect = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    setSelected(event.target.value);
+  };
+
+  return <select className={className?? ""} id={id?? ""} name={name?? ""} onChange={onChangeSelect} value={selected}>
+    <option value=''>{placeholder}</option>
+
+    {list.map(item => (
+      <option value={item} key={item}>
+        {item}
+      </option>
+    ))}
+  </select>;
 };
 
 export default Select;