Improve ESLint Rules #409 (#426)

* add no-array-index-key rule

* fix array indexing errors

* convert string concat to template strings

* make component key simpler

* remove unused var

frontend/.eslintrc.cjs

@@ -41,6 +41,7 @@ module.exports = {
 		'react/prop-types': 'off',
 		'@typescript-eslint/explicit-function-return-type': 'error',
 		'@typescript-eslint/no-var-requires': 0,
+		'react/no-array-index-key': 2,
 		'linebreak-style': ['error', 'unix'],
 
 		// simple sort error

frontend/src/AppRoutes/index.tsx

@@ -13,8 +13,8 @@ const App = (): JSX.Element => (
 		<AppLayout>
 			<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
 				<Switch>
-					{routes.map(({ path, component, exact }, index) => (
-						<Route key={index} exact={exact} path={path} component={component} />
+					{routes.map(({ path, component, exact }) => (
+						<Route key={`${path}`} exact={exact} path={path} component={component} />
 					))}
 					<Redirect from="/" to={ROUTES.APPLICATION} />
 					<Route component={NotFound} />

frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx

@@ -52,7 +52,7 @@ const QuerySection = ({
 				<Query
 					currentIndex={index}
 					selectedTime={selectedTime}
-					key={e.query + index}
+					key={`${e.query} ${e.query.length}`}
 					preQuery={e.query}
 					preLegend={e.legend || ''}
 				/>