Reactor button & Router to work with uptodate react

Author: ngoczwolinski

demo-app-next/src/components/Buttons.tsx

@@ -1,17 +1,17 @@
-import Increment from "./Increment";
+import Increment from './Increment';
 
 export default function Buttons() {
   const buttons = [];
   for (let i = 0; i < 4; i++) {
-    buttons.push(<Increment />);
+    buttons.push(<Increment key={i} />);
   }
 
   return (
-    <div className="buttons">
+    <div className='buttons'>
       <h1>Stateful Buttons</h1>
       <h4>
-        These buttons are functional components that each manage their own state
-        with the useState hook.
+        These buttons are functional components that each manage their own state with the useState
+        hook.
       </h4>
       {buttons}
     </div>

demo-app/src/client/Components/Buttons.tsx

@@ -4,7 +4,7 @@ import Increment from './Increment';
 function Buttons() {
   const buttons = [];
   for (let i = 0; i < 4; i++) {
-    buttons.push(<Increment />);
+    buttons.push(<Increment key={i} />);
   }
 
   return (

demo-app/src/client/Router.tsx

@@ -1,15 +1,17 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import Nav from './Components/Nav';
 import Board from './Components/Board';
 import Home from './Components/Home';
 import Buttons from './Components/Buttons';
 import Test from './Components/Test';
 
-const root = document.getElementById('root');
+const domNode = document.getElementById('root');
+const root = createRoot(domNode);
 
-ReactDOM.render(
+root.render(
   <BrowserRouter>
     <Nav />
     <Routes>
@@ -19,5 +21,4 @@ ReactDOM.render(
       <Route path='/test' element={<Test />} />
     </Routes>
   </BrowserRouter>,
-  root,
 );

src/backend/linkFiber.ts

@@ -188,25 +188,30 @@ function convertDataToString(
   reactimeData: ReactimeData = {},
 ): ReactimeData {
   for (const key in reactDevData) {
-    // Skip keys that are in exclude set OR if there is no value at key
-    // Falsy values such as 0, false, null are still valid value
-    if (exclude.has(key) || reactDevData[key] === undefined) {
-      continue;
-    }
-    // If value at key is a function, assign key with value 'function' to reactimeData object
-    else if (typeof reactDevData[key] === 'function') {
-      reactimeData[key] = 'function';
-    }
-    // If value at key is an object/array and not null => JSON stringify the value
-    else if (typeof reactDevData[key] === 'object' && reactDevData[key] !== null) {
-      reactimeData[key] = JSON.stringify(reactDevData[key]);
-    }
-    // Else assign the primitive value
-    else {
-      reactimeData[key] = reactDevData[key];
+    try {
+      // Skip keys that are in exclude set OR if there is no value at key
+      // Falsy values such as 0, false, null are still valid value
+      if (exclude.has(key) || reactDevData[key] === undefined) {
+        continue;
+      }
+      // If value at key is a function, assign key with value 'function' to reactimeData object
+      else if (typeof reactDevData[key] === 'function') {
+        reactimeData[key] = 'function';
+      }
+      // If value at key is an object/array and not null => JSON stringify the value
+      else if (typeof reactDevData[key] === 'object' && reactDevData[key] !== null) {
+        reactimeData[key] = JSON.stringify(reactDevData[key]);
+      }
+      // Else assign the primitive value
+      else {
+        reactimeData[key] = reactDevData[key];
+      }
+    } catch (err) {
+      console.log('linkFiber', { reactDevData, key });
+      throw Error(`Error caught at converDataToString: ${err}`);
     }
+    return reactimeData;
   }
-  return reactimeData;
 }
 // ------------------------FILTER STATE & CONTEXT DATA--------------------------
 /**
@@ -368,7 +373,13 @@ export function createTree(
 
   // ----------------APPEND PROP DATA FROM REACT DEV TOOL-----------------------
   // check to see if the parent component has any state/props
-  if (memoizedProps) {
+  if (
+    (tag === FunctionComponent ||
+      tag === ClassComponent ||
+      tag === IndeterminateComponent ||
+      tag === ContextProvider) &&
+    memoizedProps
+  ) {
     Object.assign(componentData.props, convertDataToString(memoizedProps));
   }
 
@@ -448,6 +459,7 @@ export function createTree(
       const hooksNames = getHooksNames(elementType.toString());
       console.log({ hooksNames });
       newState.hooksState = [];
+      componentData.state = {};
       hooksStates.forEach((state, i) => {
         hooksIndex = componentActionsRecord.saveNew(state.state, state.component);
         componentData.hooksIndex = hooksIndex;