fix broken cashIn methods

src/components/Header/PagesHeader.jsx

@@ -27,6 +27,9 @@ import pagesHeaderStyle from 'assets/jss/material-dashboard-react/components/pag
 
 import { getKey } from 'utils';
 
+// TODO: fix
+/* eslint-disable react/no-array-index-key, react/no-did-update-set-state */
+
 class PagesHeader extends React.Component {
   constructor(props) {
     super(props);
@@ -35,8 +38,7 @@ class PagesHeader extends React.Component {
     };
   }
 
-  // TODO: fix
-  UNSAFE_componentWillMount(e) {
+  componentDidUpdate(e) {
     if (e.history.location.pathname !== e.location.pathname) {
       this.setState({ open: false });
     }
@@ -70,9 +72,7 @@ class PagesHeader extends React.Component {
             />
           </NavLink>
         </ListItem>
-        {pagesRoutes.map(prop => {
-          const key = getKey(prop);
-
+        {pagesRoutes.map((prop, key) => {
           if (prop.redirect) {
             return null;
           }

src/components/Navbars/AuthNavbar.jsx

@@ -26,6 +26,9 @@ import Button from 'components/CustomButtons/Button';
 
 import authNavbarStyle from 'assets/jss/material-dashboard-react/components/authNavbarStyle';
 
+// TODO: fix
+/* eslint-disable react/no-did-update-set-state */
+
 class AuthNavbar extends React.Component {
   constructor(props) {
     super(props);
@@ -34,8 +37,7 @@ class AuthNavbar extends React.Component {
     };
   }
 
-  // TODO: fix
-  UNSAFE_componentWillMount(e) {
+  componentDidUpdate(e) {
     if (e.history.location.pathname !== e.location.pathname) {
       this.setState({ open: false });
     }

src/components/Table/Table.jsx

@@ -12,7 +12,8 @@ import TableRow from '@material-ui/core/TableRow';
 
 import tableStyle from 'assets/jss/material-dashboard-react/components/tableStyle';
 
-import { getKey } from 'utils';
+// TODO: fix
+/* eslint-disable react/no-array-index-key */
 
 function CustomTable({ ...props }) {
   const {
@@ -36,9 +37,7 @@ function CustomTable({ ...props }) {
         {tableHead !== undefined ? (
           <TableHead className={classes[tableHeaderColor]}>
             <TableRow className={classes.tableRow}>
-              {tableHead.map(prop => {
-                const key = getKey(prop);
-
+              {tableHead.map((prop, key) => {
                 const tableCellClasses = `${classes.tableHeadCell} ${
                   classes.tableCell
                 } ${cx({
@@ -58,9 +57,7 @@ function CustomTable({ ...props }) {
           </TableHead>
         ) : null}
         <TableBody>
-          {tableData.map(prop => {
-            const key = getKey(prop);
-
+          {tableData.map((prop, key) => {
             let rowColor = '';
             let rowColored = false;
             if (prop.color !== undefined) {
@@ -121,9 +118,7 @@ function CustomTable({ ...props }) {
                 hover={hover}
                 className={`${classes.tableRow} ${tableRowClasses}`}
               >
-                {prop.map(prop => {
-                  const key = getKey(prop);
-
+                {prop.map((prop, key) => {
                   const tableCellClasses = `${classes.tableCell} ${cx({
                     [classes[colorsColls[coloredColls.indexOf(key)]]]:
                       coloredColls.indexOf(key) !== -1,

src/components/Wizard/Wizard.jsx

@@ -10,11 +10,9 @@ import Card from 'components/Card/Card';
 
 import wizardStyle from 'assets/jss/material-dashboard-react/components/wizardStyle';
 
-import { getKey } from 'utils';
-
 // TODO: fix
 
-/* eslint-disable react/no-string-refs, react/no-unused-prop-types, react/no-unused-state */
+/* eslint-disable react/no-array-index-key, react/no-string-refs, react/no-unused-prop-types, react/no-unused-state */
 
 class Wizard extends React.Component {
   constructor(props) {
@@ -254,9 +252,7 @@ class Wizard extends React.Component {
           </div>
           <div className={classes.wizardNavigation}>
             <ul className={classes.nav}>
-              {steps.map((prop, i) => {
-                const key = getKey(prop);
-
+              {steps.map((prop, key) => {
                 return (
                   <li
                     className={classes.steps}
@@ -268,7 +264,7 @@ class Wizard extends React.Component {
                       className={classes.stepsAnchor}
                       onClick={e => {
                         e.preventDefault();
-                        this.navigationStepChange(i);
+                        this.navigationStepChange(key);
                       }}
                     >
                       {prop.stepName}
@@ -285,11 +281,10 @@ class Wizard extends React.Component {
             </div>
           </div>
           <div className={classes.content}>
-            {steps.map((prop, i) => {
-              const key = getKey(prop);
+            {steps.map((prop, key) => {
               const stepContentClasses = cx({
-                [classes.stepContentActive]: this.state.currentStep === i,
-                [classes.stepContent]: this.state.currentStep !== i
+                [classes.stepContentActive]: this.state.currentStep === key,
+                [classes.stepContent]: this.state.currentStep !== key
               });
               return (
                 <div className={stepContentClasses} key={key}>