Controlled & Uncontrolled Component

src/components/pages/about-page/AboutPage.tsx

@@ -1,14 +1,41 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Link from 'next/link';
 import { Routes } from '../../../constants/Routes';
+import { UiSelect } from '../../ui/ui-select/UiSelect';
 
 interface IProps {}
 
 export const AboutPage: React.FC<IProps> = (props) => {
+  const [controlledValue, setControlledValue] = useState<string>('3');
+
   return (
     <div>
       <h1>About</h1>
       <p>This is the about page</p>
+      <div>
+        <UiSelect
+          id="uncontrolled"
+          onChange={(value) => console.log(value, typeof value)}
+          initialValue="2"
+          options={[
+            { label: 'One', value: '1' },
+            { label: 'Two', value: '2' },
+            { label: 'Three', value: '3' },
+            { label: 'Four', value: '4' },
+          ]}
+        />
+        <UiSelect
+          id="controlled"
+          onChange={(value) => setControlledValue(value)}
+          value={controlledValue}
+          options={[
+            { label: 'One', value: '1' },
+            { label: 'Two', value: '2' },
+            { label: 'Three', value: '3' },
+            { label: 'Four', value: '4' },
+          ]}
+        />
+      </div>
       <p>
         <Link href={Routes.Index}>
           <a>Go home</a>

src/components/ui/ui-select/UiSelect.constants.ts

@@ -0,0 +1,4 @@
+export interface IUiSelectOptions {
+  label: string;
+  value: string | number;
+}

src/components/ui/ui-select/UiSelect.tsx

@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from 'react';
+import { IUiSelectOptions } from './UiSelect.constants';
+import { noop } from '../../../utils/misc.utils';
+
+interface IProps {
+  options: IUiSelectOptions[];
+  /**
+   * If a value is passed in then the component is considered controlled.
+   */
+  value?: string;
+  id?: string;
+  name?: string;
+  onChange?: (value: string) => void;
+  initialValue?: string;
+}
+
+export const UiSelect: React.FC<IProps> = (props) => {
+  const [selected, setSelected] = useState(props.value || props.initialValue);
+
+  useEffect(() => {
+    setSelected(props.value);
+  }, [props.value]);
+
+  return (
+    <select
+      value={selected}
+      name={props.name}
+      id={props.id}
+      onChange={(event: React.ChangeEvent<HTMLSelectElement>) => {
+        props.onChange!(event.target.value);
+      }}
+    >
+      {props.options.map((option) => (
+        <option key={option.label} value={option.value}>
+          {option.label}
+        </option>
+      ))}
+    </select>
+  );
+};
+
+UiSelect.defaultProps = {
+  onChange: noop,
+};