changed color of Select Context drop down text from white to 383838, gave unique keys to tab components to resolve unique key warning, changed currentContext, contextInput in CreateContainer to '' default

Author: dentonwong

app/src/components/ContextAPIManager/ContextManager.tsx

@@ -42,7 +42,7 @@ const ContextManager = (props): JSX.Element => {
           <TabContext value={value}>
             <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
               <TabList onChange={handleChange} centered={true} sx={{color:color}}>
-                <Tab   style={{ color: color }}label="Create/Edit" value="1" />
+                <Tab style={{ color: color }} label="Create/Edit" value="1" />
                 <Tab style={{ color: color }} label="Assign" value="2" />
                 <Tab style={{ color: color }} label="Display" value="3" />
               </TabList>

app/src/components/ContextAPIManager/CreateTab/CreateContainer.tsx

@@ -15,8 +15,8 @@ import { RootState } from '../../../redux/store';
 
 const CreateContainer = () => {
   const state = useSelector((store: RootState) => store.contextSlice);
-  const [contextInput, setContextInput] = React.useState(null);
-  const [currentContext, setCurrentContext] = React.useState(null);
+  const [contextInput, setContextInput] = React.useState('');
+  const [currentContext, setCurrentContext] = React.useState('');
   const [errorMsg, setErrorMsg] = React.useState('');
   const [errorStatus, setErrorStatus] = React.useState(false);
   const currentKeyValues = state.allContext.find(
@@ -79,7 +79,7 @@ const CreateContainer = () => {
   const handleDeleteContextClick = () => {
     dispatch(deleteContext({ name: currentContext }));
     setContextInput('');
-    setCurrentContext(null);
+    setCurrentContext('');
   };
 
   console.log('state.allContext', state.allContext);

app/src/components/ContextAPIManager/CreateTab/components/AddContextForm.tsx

@@ -68,7 +68,7 @@ const AddContextForm = ({
   const contexts = allContext.length ? (
     allContext.map((context) => {
       return (
-        <MenuItem style={{ color: color }} value={context.name}>
+        <MenuItem style={{ color: '#383838'}} value={context.name}>
           {context.name}
         </MenuItem>
       );
@@ -129,7 +129,7 @@ const AddContextForm = ({
           <Select
             required
             sx={{ width: 425 }}
-            style={{ border: '1px solid #0099e6', color: color }}
+            style={{ border: '1px solid #0099e6', color: color}}
             value={currentContext}
             label="Select Context"
             MenuProps={{ disablePortal: true }}

app/src/components/ContextAPIManager/CreateTab/components/DataTable.tsx

@@ -51,10 +51,11 @@ export default function DataTable({ target, currentContext }) {
                   style={{ color: 'black' }}
                   component="th"
                   scope="row"
+                  key={`${index}-key-${data.key}`}
                 >
                   {data.key}
                 </StyledTableCell>
-                <StyledTableCell style={{ color: 'black' }} align="right">
+                <StyledTableCell style={{ color: 'black' }} align="right" key={`${index}-value-${data.value}`}>
                   {data.value}
                 </StyledTableCell>
               </StyledTableRow>