updated inital message in Diff.jsx

Author: nmwenz90

src/app/components/Diff.jsx

@@ -1,13 +1,14 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { diff, formatters } from 'jsondiffpatch';
-import ReactHtmlParser from 'react-html-parser';
+import React from "react";
+import PropTypes from "prop-types";
+import { diff, formatters } from "jsondiffpatch";
+import ReactHtmlParser from "react-html-parser";
 
-import { useStoreContext } from '../store';
+import { useStoreContext } from "../store";
 
 function Diff({ snapshot, show }) {
   const [mainState] = useStoreContext();
-  const { currentTab, tabs } = mainState;
+  const { currentTab, tabs } = mainState; //k/v pairs of mainstate store object being created
+  console.log(mainState);
   const { snapshots, viewIndex, sliderIndex } = tabs[currentTab];
   let previous;
 
@@ -17,19 +18,17 @@ function Diff({ snapshot, show }) {
   } else {
     previous = snapshots[sliderIndex - 1];
   }
-
+  //diff function is supposed to return two of the same objects side by side
   const delta = diff(previous, snapshot);
+  console.log("this is the result of running diff function   ", delta);
   // returns html in string
   const html = formatters.html.format(delta, previous);
   if (show) formatters.html.showUnchanged();
   else formatters.html.hideUnchanged();
 
-  if (previous === undefined || delta === undefined) return <div> No state change detected. </div>;
-  return (
-    <div>
-      {ReactHtmlParser(html)}
-    </div>
-  );
+  if (previous === undefined || delta === undefined)
+    return <div> No changes to State: trigger an event to update state </div>;
+  return <div>{ReactHtmlParser(html)}</div>;
 }
 
 Diff.propTypes = {