From 407bd9613cdfb6f344f42432dd705e64ca44ef69 Mon Sep 17 00:00:00 2001
From: kate-deriv <121025168+kate-deriv@users.noreply.github.com>
Date: Wed, 8 Feb 2023 08:54:52 +0300
Subject: [PATCH] kate/78896/ TrackJS: a.markets.forex is undefined (#7328)

* fix: add check for undefined values and add key for React Fragment after map method

* refactor: change key for react fragment

* refactor: add an empty commit

---------

Co-authored-by: Matin shafiei <matin@deriv.com>
---
 src/javascript/app/pages/trade/markets.jsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/javascript/app/pages/trade/markets.jsx b/src/javascript/app/pages/trade/markets.jsx
index 14edc1ffc40b6..4a6685d0b06d8 100644
--- a/src/javascript/app/pages/trade/markets.jsx
+++ b/src/javascript/app/pages/trade/markets.jsx
@@ -124,7 +124,11 @@ class Markets extends React.Component {
         let market_symbol = Defaults.get('market');
         const market_list = Symbols.markets();
         this.markets = getAvailableUnderlyings(market_list);
-        delete this.markets.forex.submarkets.smart_fx;
+
+        if (this.markets.forex) {
+            delete this.markets.forex.submarkets.smart_fx;
+        }
+
         this.underlyings = Symbols.getAllSymbols() || {};
         let underlying_symbol = Defaults.get('underlying');
 
@@ -585,11 +589,11 @@ class Markets extends React.Component {
                             <div className='mobile'>
                                 <React.Fragment>
                                     <ul>
-                                        {Object.keys(group_markets).map((item) => {
+                                        {Object.keys(group_markets).map((item, idx) => {
                                             const derived_category = group_markets[item].markets[0].key;
                                             return (
                                                 item === 'none' ? (
-                                                    <React.Fragment>
+                                                    <React.Fragment key={`${item}_${idx}`}>
                                                         {group_markets[item].markets.map((m) => (
                                                             <li
                                                                 onClick = {scrollToMarket.bind(null, m.key)}