functionality for effects display

Author: Gaber Mowiena

src/app/components/App.jsx

@@ -11,7 +11,6 @@ import Details from '../container/Details.jsx';
 
 // styled components
 import { Wrapper } from '../styles/SplitPane.jsx';
-import stateDifference from './stateDifference.jsx';
 
 // import from styled components to create global styles
 const GlobalStyle = createGlobalStyle`

src/app/components/DetailCards/Effects/EffectsDisplay.jsx

@@ -1,8 +1,23 @@
 import React from 'react';
 import { DetailsWrapper } from '../../../styles/Details.jsx';
+import ReactJson from 'react-json-view';
+// functionality
+// gets difference from previous state to new state
+import stateDifference from '../../stateDifference.jsx';
+
 
 export default function Effects(props) {
+  console.log('state differnce in effects display IMPORT', stateDifference);
+  const differenceOfPrevAndNextState = stateDifference([1,2,3], [2,4, 9, 11, {'wow': 1}])
   return (
-    <DetailsWrapper>effects display page</DetailsWrapper>
+    <DetailsWrapper>
+      <ReactJson
+        theme={'threezerotwofour'}
+        style={{ backgroundColor: 'transparent', height: '-webkit-fill-available' }}
+        displayDataTypes={false}
+        src={differenceOfPrevAndNextState}
+      />
+    </DetailsWrapper>
+    
   );
 }

src/app/container/Details.jsx

@@ -21,6 +21,7 @@ export default function Details(props) {
     action, id, actionState,
   } = props;
 
+  
   return (
     <Router>
       <>