Refact Component Map to display componentData state, context & props

Author: ngoczwolinski

src/app/components/StateRoute/ComponentMap/ComponentMap.tsx

@@ -126,9 +126,11 @@ export default function ComponentMap({
     const contextFormat = [];
     for (const key in data) {
       // Suggestion: update the front end to display as a list if we have object
-      contextFormat.push(
-        <p className={`${type}-item`}>{`${key}: ${JSON.stringify(data[key])}`}</p>,
-      );
+      let inputData = data[key];
+      if (inputData !== null && typeof inputData === 'object') {
+        inputData = JSON.stringify(inputData);
+      }
+      contextFormat.push(<p className={`${type}-item`}>{`${key}: ${inputData}`}</p>);
     }
     return contextFormat;
   };

src/backend/linkFiber.ts

@@ -425,7 +425,7 @@ function createTree(
     componentData.props = convertDataToString(memoizedProps);
   }
 
-  // ----------------APPEND STATE DATA FROM REACT DEV TOOL----------------------
+  // ------------APPEND STATE & CONTEXT DATA FROM REACT DEV TOOL----------------
   if (stateNode?.state) {
     Object.assign(componentData.state, stateNode.state);
   }
@@ -447,7 +447,7 @@ function createTree(
   }
   // if user uses useContext hook, context data will be stored in memoizedProps.value of the Context.Provider component => grab context object stored in memoizedprops
   // Different from other provider, such as Routes, BrowswerRouter, ReactRedux, ..., Context.Provider does not have a displayName
-  // TODO: need to render this context provider when user use usContext hook.
+  // TODO: need to render this context provider when user use useContext hook.
   if (tag === ContextProvider && !elementType._context.displayName) {
     let stateData = memoizedProps.value;
     if (stateData === null || typeof stateData !== 'object') {