added error boundary, fixed selection and layout

src/components/SelectCategory.tsx

@@ -4,24 +4,24 @@ import { SelectWrapper } from '../App.style';
 import { Category } from '../Types';
 
 type Props = {
-  category: number;
+  categoryID: number;
   categoryList: Array<Category>;
-  setCategory: (category: number) => void;
+  setCategoryID: (categoryID: number) => void;
 };
 
-const SelectCategory = ({ category, categoryList, setCategory }: Props) => {
+const SelectCategory = ({ categoryID, categoryList, setCategoryID }: Props) => {
   return (
     <SelectWrapper
-      value={category}
+      value={categoryID}
       onChange={(e: React.ChangeEvent<{ value: unknown }>) => {
         e.preventDefault();
-        setCategory(e.target.value as number);
+        setCategoryID(e.target.value as number);
       }}
     >
-      <option value={1}>Any Category</option>
-      {categoryList.map((cat) => (
-        <option value={cat.id} key={cat.id}>
-          {cat.name}
+      <option value={1}>Random Category</option>
+      {categoryList.map((category) => (
+        <option value={category.id} key={category.id}>
+          {category.name.replace(/Entertainment: |Science: /g, '')}
         </option>
       ))}
     </SelectWrapper>