From 7a4708825023c89faaf1061f1d0f511255fd5ae2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Noah=20M=C3=A1rquez=20Vara?=
 <47271218+xvxnoah@users.noreply.github.com>
Date: Fri, 15 Dec 2023 11:35:41 +0100
Subject: [PATCH] Update RecipeFilters.jsx

---
 src/components/RecipeFilters.jsx | 45 +++++++++++++++++---------------
 1 file changed, 24 insertions(+), 21 deletions(-)

diff --git a/src/components/RecipeFilters.jsx b/src/components/RecipeFilters.jsx
index 902627f..4c0b0b8 100644
--- a/src/components/RecipeFilters.jsx
+++ b/src/components/RecipeFilters.jsx
@@ -33,34 +33,37 @@ function RecipeFilters({ onClose, inValues }) {
         <Form.Group>
           <Form.Label>Sort By</Form.Label>
           <div className="d-flex">
-            <Form.Select className="me-3" defaultValue={filters.sortBy}>
-              {sortOptions.fields.map((option) => (
-                <option
-                  key={option.id}
-                  value={option.name}
-                  onClick={() => {
-                    setFilters({
+              <Form.Select 
+              className="me-3" 
+              value={filters.sortBy}
+              onChange={(e) => {
+                  setFilters({
                       ...filters,
-                      sortBy: option.name,
-                    });
-                  }}
-                >
-                  {option.displayName}
-                </option>
+                      sortBy: e.target.value,
+                  });
+              }}
+          >
+              {sortOptions.fields.map((option) => (
+                  <option
+                      key={option.id}
+                      value={option.name}
+                  >
+                      {option.displayName}
+                  </option>
               ))}
-            </Form.Select>
-            <span
+          </Form.Select>
+          <span
               className="fs-4 colorless-span-button"
               role="button"
               onClick={() => {
-                setFilters({
-                  ...filters,
-                  sortAscending: !filters.sortAscending,
-                });
+                  setFilters({
+                      ...filters,
+                      sortAscending: !filters.sortAscending,
+                  });
               }}
-            >
+          >
               {filters.sortAscending ? <SortUp /> : <SortDown />}
-            </span>
+          </span>
           </div>
         </Form.Group>
         <Form.Group className="mt-4">