category format controlled

src/assets/styles/_posts.scss

@@ -2,6 +2,10 @@
   select {
     padding: 1rem 1.2rem;
     border: 1px solid #b8b9bb;
+
+    option {
+      text-transform: capitalize;
+    }
   }
 
   &.inner {

src/helpers/stringMethods.ts

@@ -0,0 +1,3 @@
+export const capitalizeFirstLetter = (string: string): string => {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+};

src/pages/Post.tsx

@@ -10,6 +10,7 @@ import { BiLinkExternal } from "react-icons/bi";
 
 // Helpers
 import { parseDate } from "../helpers/parseDate";
+import { capitalizeFirstLetter } from "../helpers/stringMethods";
 
 const Post = () => {
   const date = new Date("0.0.0000");
@@ -59,7 +60,11 @@ const Post = () => {
               <input
                 type="text"
                 readOnly
-                value={postData.id !== -1 ? postData.category : ""}
+                value={
+                  postData.id !== -1
+                    ? capitalizeFirstLetter(postData.category.toLowerCase())
+                    : ""
+                }
               />
             </div>
             <div className="post__content__block">

src/pages/Posts.tsx

@@ -12,6 +12,7 @@ import { getPosts } from "../helpers/apiRequests";
 import { PostType } from "../types/posts";
 import { Link } from "react-router-dom";
 import { parseDate } from "../helpers/parseDate";
+import { capitalizeFirstLetter } from "../helpers/stringMethods";
 
 // Data
 const headers: string[] = [
@@ -34,11 +35,14 @@ const Posts = () => {
   useEffect(() => {
     const categoriesTemp: string[] = categories;
     if (posts[0].id !== -1) {
-      posts.map((post: PostType) => categoriesTemp.push(post.category));
+      posts.map((post: PostType) =>
+        categoriesTemp.push(capitalizeFirstLetter(post.category.toLowerCase()))
+      );
       let categoriesTempUnique = categoriesTemp.filter((element, index) => {
         return categoriesTemp.indexOf(element) === index;
       });
       setCategories(categoriesTempUnique);
+      console.log(categoriesTempUnique);
     }
   }, [posts]);
 
@@ -92,7 +96,11 @@ const Posts = () => {
                         >
                           <tr>
                             <td>{index + 1}</td>
-                            <td>{post.category}</td>
+                            <td>
+                              {capitalizeFirstLetter(
+                                post.category.toLowerCase()
+                              )}
+                            </td>
                             <td>{post.title}</td>
                             <td>
                               <a
@@ -110,7 +118,10 @@ const Posts = () => {
                       );
                     })
                   : posts.map((post: PostType, index: number) => {
-                      if (post.category === category) {
+                      if (
+                        capitalizeFirstLetter(post.category.toLowerCase()) ===
+                        category
+                      ) {
                         return (
                           <Link
                             className="post-link"
@@ -119,7 +130,11 @@ const Posts = () => {
                           >
                             <tr>
                               <td>{index + 1}</td>
-                              <td>{post.category}</td>
+                              <td>
+                                {capitalizeFirstLetter(
+                                  post.category.toLowerCase()
+                                )}
+                              </td>
                               <td>{post.title}</td>
                               <td>
                                 <a