From 439eb60f31fd166d6c2283e72ec066174f78df0d Mon Sep 17 00:00:00 2001
From: Aurora Lahtela <24460436+AuroraLS3@users.noreply.github.com>
Date: Fri, 23 Jun 2023 08:53:39 +0300
Subject: [PATCH] Fixed issues with React keys in Query page

This caused React to re-render the filter every time options were changed,
which appeared to user as if their changes did not apply properly.

Affects issues:
- Fixed #3086
---
 .../dashboard/src/components/cards/query/FilterDropdown.js      | 2 +-
 Plan/react/dashboard/src/components/cards/query/FilterList.js   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/Plan/react/dashboard/src/components/cards/query/FilterDropdown.js b/Plan/react/dashboard/src/components/cards/query/FilterDropdown.js
index 698792943..ba8a13457 100644
--- a/Plan/react/dashboard/src/components/cards/query/FilterDropdown.js
+++ b/Plan/react/dashboard/src/components/cards/query/FilterDropdown.js
@@ -52,7 +52,7 @@ const FilterDropdown = ({filterOptions, filters, setFilters}) => {
                 <h6 className="dropdown-header">{t('html.query.filters.add')}</h6>
                 <Scrollable>
                     {filterOptions.map(option => (
-                        <Dropdown.Item key={option} onClick={() => addFilter(option)}>
+                        <Dropdown.Item key={JSON.stringify(option)} onClick={() => addFilter(option)}>
                             {getReadableFilterName(option)}
                         </Dropdown.Item>
                     ))}
diff --git a/Plan/react/dashboard/src/components/cards/query/FilterList.js b/Plan/react/dashboard/src/components/cards/query/FilterList.js
index e26de0a4e..6faa15bc3 100644
--- a/Plan/react/dashboard/src/components/cards/query/FilterList.js
+++ b/Plan/react/dashboard/src/components/cards/query/FilterList.js
@@ -29,7 +29,7 @@ const FilterList = ({filters, setFilters, setAsInvalid, setAsValid}) => {
 
     return (
         <ul id={"filters"} className={"filters"}>
-            {filters.map((filter, i) => <li key={JSON.stringify(filter)} className={"filter"}>
+            {filters.map((filter, i) => <li key={'filter-' + i} className={"filter"}>
                 <Filter filter={filter} index={i}
                         setFilterOptions={newOptions => updateFilterOptions(i, newOptions)}
                         removeFilter={() => removeFilter(i)}